{"_id":"@material/mwc-fab","_rev":"733-c0b578c070f9094e723978f7a22ffeba","name":"@material/mwc-fab","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.1.0":{"name":"@material/mwc-fab","version":"0.1.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-Yo0A0tVCVGfRTtjs4u+wtBUiOrEegeq3k3EZ7PAtiyUSqs6Qu1o4SEouTQh6fVvBUrUvbscYzwb0e+5ItmYZDA==","shasum":"bab704d4f2a0be63aca53abd4a28c018a42d53a9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.1.0.tgz","fileCount":5,"unpackedSize":11513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8OmZCRA9TVsSAnZWagAAswsP/3U53y6gPdlA6pF0g9O6\ndvub1Bz6KUv+duEatp7OIdUwgL0asdTjfJ51hM4jZssCohtiaOx4RuQskEaL\n3KXb9gaF84H0KKQ2zYyvnwJwhdRnCm18WjSKREFVKqn/W+h9xntSzuuDaZeO\n6WhI2VZwtBmqazbdHV6XTtArUj70qU9Gv1XihzMm5SH3f1q5pbtgsjejWm0f\n1TqfvmzmZvk6jvv+GxDLr0N1UkCST0PoWCDBnt4uEJT7aNaWX/E7EkddsoTO\n6+x7eH0bpO0eiMTUUEhagreK/kVqe/9nqzcR9dpnkNpi+1nc2Y1fpH76J8+3\nXPhH6DoSAWVKnoSeDILX0Fx2dc7wgiXNkyRxoz3701u55OZKfHAyQxfEDIMA\nmKmsawioHV9cW9nV8OHWOikhThO/d0prCr5lxVdYZEVnnDeTrDW7HcHoYpDQ\nqtAvMtatYKLYtMgFf1iJjzdlQztJ+QU+Gg0hi2FcVRSK8mhgBWcp3rfbyHqo\nhkrF1aMZ8jDWvSv22cp6WsH/Pmwb3djraFmmhoxZ4JBPTivmKsMQjf4gwJd8\nvbw0Sjiz9g1XoV0PDfFF84gmhPYnJwGC4DhB1kxiiAZh5Z+ORKjK+z55GFkp\nJmNZpbf4LepAkNlCKl40cgZoYYHcnq9AbnMRWBg6uindNBcdqBxqlNuuBDjg\nX+RY\r\n=nTMG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBquPC095VTKdrr4Eapj7g12CkyJTGb/hXufmsmlu0eWAiAzrZFB6EYg3qbPw2XVRUuTGZUnKkz0SYMd9t/81nnwlw=="}]},"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-fab_0.1.0_1525737880409_0.7781053537454978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.1":{"name":"@material/mwc-fab","version":"0.1.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-c6WTP1t0Ww0ycT1hi9pI0D6Wxb5Gk7ZhaKmt7jHunqNkYbpUzk3XNXUi/Hw7NKtEEVFMNKuNzeKIqED6b0l5Lw==","shasum":"18485330d145b3b1609b87f9ead7190cc563879c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.1.1.tgz","fileCount":5,"unpackedSize":11520,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa82KKCRA9TVsSAnZWagAA5aEP/iNEOKgmyIll6jLYQwuZ\n4F1+32TcQrTA4acZG9v2lpfWQdMYIOYfOt5kOjma9QsLB0efj7xESZKrjmpy\nYN5h3o5yzmzKxCHaUiQW1m2cTrcT+G0woQqRgKN/6kKQpv8sRIijy+DufQTO\npodQ6nwdJs/ngDTDmZnNKu4M3fuKmxYXqpN/JMJAVY0AJsr+Vpvu+b+6gTq4\nZcYdSZZMLkwD17g8O4WM8vatILxS/ADEcWFtY+zfGAMd2R6EpvVDDXTiIjW9\n7y2xwsfq9XFeuFHXCESt718yZj/1/PlyEAz5vuNy77jQ0YvAwTUHe3Auuj71\nrj2laSIKTIjXu7JxfZiPIKrxzNxhjATB0QsnFL7yfib+APVL2fLMlBBctEdH\n8+KBGAXoBxbrs/W31nRqf/yeVZGz/65UwK6HzL6sU1zt7jdvcT6ZNu4Y3/oB\n+3K1Dff3DZJF4nHdlV3fdGWp8ferLNjPs398cLi0kWTmucYknZnQln74FMqk\nL51sQ43riNVKimPFfhane+7OV5IidzfSVoU9bCRoRZDgu8W+AjNCC5hQ6Bzi\n1lHG6/jWeDg992kbkQg1LC1CHQssj3a1NTCaeEVM4U342DWVmu1rVjzKi1fK\n7744HUDXB0Lvy3e9gCQrNKysn7Zl9biIs1M7Fu24ov3YMBUWCc/ig+X/53hu\nxzdQ\r\n=edIK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMpjuBqByLUzpJHH3WJ5jXyeuKmlRhQWKe11fSLA1q4AiEAi2iHc9cjI0rH7WDfBgtqxe5SkgiC0/1dqMZgrrb9Dlk="}]},"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-fab_0.1.1_1525899914199_0.4726718332179396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.2":{"name":"@material/mwc-fab","version":"0.1.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-NE/u4Zw1E9tJhEdIXNeLbycDzC2T5Y4FoZIFyuBlBE8Vo0Xp9ARNGZ7N7MzOCrpcqkYdwvMnww35h+R4ZvB1mw==","shasum":"86d449342184410f64cbc8fcbae638858ba228ed","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.1.2.tgz","fileCount":5,"unpackedSize":11578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIvFkCRA9TVsSAnZWagAAbuQP/jnc1LwVwSjPiUcI+3Iw\nYV86n46G/UXMB5mWNe30WCb2Z5Y7PLdm0psI3TVGeZ/VAsxAFI1hGQjYuM5E\nGkBs/ThrJhlcOLxsU5o7K/vC4M0u0lGJqsug7f2b3zJHbhAjFIHTD2B+tvQh\nJI/U6iL4lKWz3hdZj1jeiMahTh8O4EGlpTvZMMCt0jtasHejAMk2ZdSAD74k\nFU83OIZ6O5K9MZhd5vD+7M+98GOvlhiUZZKXU4IC30shXz2E7OGGjyyGBefc\nJ1Y0zR7ifMbdgFZlAKr5hAyPiqD5UhD0FAT+yCcQmmA1bPPNsMYtefbi/RnD\nu2xe9LoUMCseyzg2nJ2x93d+poeYod0YoMIQ1LTAqypESL/A9UV3kzuLOeFU\nGjTuvoQJl1PaugiEmnxX9DzEpuq02C5fhgJvkPnlICg5OZr8c2cVfngxYFwf\nUTZ6xsk94/ao9LHbOWxqIcB6aJ7Y+nfpcKal2SC6/KJDZLl3jtrHeRe6GStd\nceHlpF5sNJKri3lWIRTuGUM7pambY8Li/7qTfUTdpWsbO5UK5vbiXxI1iA+u\ntNn8Vs8uuLIMlsZ320q5ZJ8fQEKw3Q/mSDKoo28ctc6S1xbIXt6r3RDmgEfe\neHoWIblOk2+NxFgAH0++FYyPRyIX0sumH12rpF9ucNCAvw9ia2cR0rgtcfta\nEK+2\r\n=TzKd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyF7Tdspn71oR/vFAK6L7oPxKkmRnRTC2EJms4R8kU3AiEAu/jBvkzyeB7BvAIBWPYRPF+cYZtl1EVVboA6989nm8w="}]},"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-fab_0.1.2_1529016675775_0.2578463283662029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.0":{"name":"@material/mwc-fab","version":"0.2.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-l19+OUr+Bd7QDAc3+zbAKEDKC705Oq80QkZVzUhN4C41u6kQ+vd+MQJiuU5dM9ynhFkcXjkQiQz5xa/ngKyGBA==","shasum":"900716f15cf82c3fd6cdb6580375660472879e5c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.2.0.tgz","fileCount":5,"unpackedSize":11644,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmwKeCRA9TVsSAnZWagAAnC0P/3aZ6Y73jc5v+EBWJSYz\nkB2FDRtaXF1Qflouxva5Z7wjZZld1KFfM0Krf4NmcPs6/oDXMP6k5AAkAiYS\nG51ziEQUslUUyXnKd6+yQLikstA8S3VaRAL/6VKL9DXUkWxyPS3IQxrP4YqN\nbfmVLBRVu3xbA0WVEL7P/9+GZ7q1TP5VG48CJtI+S/KoHwnDckQrSBO6pLyK\n3+CI4s73CWgZWjHbXIw+yYsJcXg1gDaVk2BC3yF0fbBnmXTfZTHR4PIbOvqB\nPJQDmND03IrRNVaxgGhsqcGPF3GpeQZ8YpSjI9ga5rNp8zkCWWOtFWR7FtS3\n4JiYnddX2j3U6X+qNO5CC/mskHHKM9ijvppq8+/6tHFYw5PrLzse2aPcVUCr\nROH6ZaFVeQzilAHfOsgymgmTK4JmuIJyNwOnit0cF+dodcr6d3fNvkNJXNAL\nCVajkDHZxgDJKU1PNtjQ0eVV4AeKW2TnXPkt74zpVUvmupLzkHEHjrrwckF3\ntEcIllrfIQjmn0opI1MvF9ZgoiOlyJaqcu6H7W+qaA1JKg7dUoT9EF+0qW23\nh42KHuZBYWRCVx6fyQvFI3xdXKE+KZNXmv09EPYdsebV7vGMKF8N+Qd+LUql\nx9UQX7JjfpMtKGZ9dwLDUsISNsI3f0cL/UduP+mC4+0jCRCRtKNikW7FnLT5\nxKLl\r\n=TPev\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChnuSYxXSnOGrPWpm87O3njtxLgd3g49cAED6CHnJ5zwIhAJnAYr0/pW1WCYBmfG4P5YxwjzsUcl7Hgl4bS3J9mGn/"}]},"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-fab_0.2.0_1536885405844_0.7740216122384882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.1":{"name":"@material/mwc-fab","version":"0.2.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-nMGEd8N+3ORNzOqNrTVlZ0bpFp2LNy40Smw3JiKJ+2O5PEzbB0LuhnFQi2t+vCCIYIzkst2ezi/Hho08NVcEZA==","shasum":"24bcfaf5885d58c319a09d751ad1d83d7ea48545","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.2.1.tgz","fileCount":5,"unpackedSize":11646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpZQvCRA9TVsSAnZWagAAAfoP/0toivPTEWdVokfOgiGr\nhPcAceNV0QaEqEz4nglu3iANBYkUrTV7h242osU6UqbFmKEV4lVoJ2aBpVTa\n/nNBhYhfnUU5kXYL+BY3QOvay3mh2+xm/Ax3sUGUBOoZkjzFYL/X2/e5RPn3\norHGLHtws7IApwMEA3ZF4C1M4IDUUwCnACpzEexBXQYjrpaeD6zcYxV7G3ZQ\n3ndG0sxWspESNCgmAzM40zl7IRUzlEf0BZQ3yXU10XbDNPU9Cqi9Amy5mIct\n0u/B+Bz55yMeGKzcgsU/ALluAa5TMITK0ZdnUo9HH4H6+y1L6xSW3wyLPiko\nSP39ABS2uqqWsiHRYvVS4pM7dsVZzAwDMxCuwdg/2nJdwP8vgXFzeSbw6yt/\n55fWUEulGAg4X1W7Tq+Oa29huD4VCDKus31yUYVD5A+mM9qlZHGzZj2jJM+U\nN/vJNOhA0CSfTThwQwUYczq00TZZFXvyBRzmWgSb6hQVuiXQq24VznH3COtn\nZ5n3Zo1o7yJ828U4rqldZWt4XCmg9ycEGeIkoQbeT8PqwCePq+3tLSEMLI4F\nOYAwz4pFst8jnUp4osqZuT5UIMcrnDKBt65WMzx7o06wJ5sjoSLZZjNk5v/O\nhBc3Yo7+tnZoMs6tzXRS2zt6+plvz98X59dI+j2eTO8tRIS2pWFxS9rIffg4\np+Oo\r\n=FeEY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+2KVsua2HNNbAuNq4ioaXwGvoIngz0h5sJO5Mvql8rAiEA/oVQ1cV8MUOpH5JhjC63GvbMrWcMT8ECfOq8xzU28Vw="}]},"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-fab_0.2.1_1537578030437_0.8796498832800257"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.0":{"name":"@material/mwc-fab","version":"0.3.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.3.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-2my1+Ks7V3zwixqOyxXYBRZj2ZacfQku9PshXaS27iFHmkFUr3ZEKGpSaRgUkHR0eY0oxu1xPx7swLxlywqIQw==","shasum":"a4a3197285b0699ee1d1f7e7ac2fb6b73e6382d3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.3.0.tgz","fileCount":12,"unpackedSize":34182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtqGHCRA9TVsSAnZWagAA0DUQAKGnheowGT4VkO7rXym8\nBPsxiJMc+FaYwCZupgesAJoLcp/MJLgCIu2QFrxcFuQUWfIRYwtwdub0NGvI\nuFTjURbVY92Qtga8widn3ulHL4qn16XihPwnwLa4LIHr31QKtx/I9bzl4WMn\nPh7Ubdn/N+5vpyGeiqnVhoVlmYaVw1FXEW3jUVNeSXtIwKZh4OCCgbtetIdl\nIlSo93kXcdtybkwc8bbrYeMrQe/PyRqwcTr0pcFBMNAne44GVfycDN1ihBfS\nT7lblxPWJVHBtOPWwb2cAoWWRSa157Tb5bNJpmRe9vjMf5zHNmsFRx6bS0UH\np/qdWai/6VXEC6OrKhY+dICEqABg0VykZQK2R3Li9QGnGdktH9N5G2aOzLsU\nmSSj5y68L9NXHsymFB3PcEhc3yLN/F/CLJ7VohvDm4lxP9qDoGdobM9gtk30\n0wEwHsaJwv30IMSlHLD0yjIiaTKLLDZVR7+/jYHmuwzmQpqEEFZ34S3OFkFv\nCx4TaUwoWSek7DdWc8bHIimeF4V5T90D7ZC6AdTTCs+FmWPeWA6UQ9QzLn50\nab2ejFVQqvkstMN3UsRzU9LZw18NR0ydJQjZvQV+iVp2GfNvklbwZtAdsIC8\nIf2N0Ab15aBIv3rRJ3Chlzp2tFmLC3LCi/o//8jr3Nxz6yUam2e0YRmXYu68\nrtFq\r\n=SEJd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCddkmGCXQXBMIMa0v8jzd9yhGq+3FmRJKeI9rlQGhivwIgdv7i1+DzZi8XCdQvnNJxTvN2+5oeAXNIUhJIQ4NpO4M="}]},"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-fab_0.3.0_1538695558383_0.40595663902004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.1":{"name":"@material/mwc-fab","version":"0.3.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.3.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-3IBqYyeA7FlczKuuh9cWeWtcKvVoAxpv5huaBIRsCS1bi6ui3ja9bK1H/PLPGn0syVIdouHIZuevZBZX0z4U3g==","shasum":"2f245d7da94945dd9b7a44f8bd8b827c861a66e8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.3.1.tgz","fileCount":12,"unpackedSize":34202,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu64NCRA9TVsSAnZWagAAPdoP/jvFTuTbYk6MV9wFOHB9\nM+kMq/YozvNTcwkllJ5+qfUEA5jF9OkmB3LdUhYhu7rbR9U3tp6n5R4b8PwH\nZbypFZPInDMgzXSKnOHLxpy9HClGPNPND+xtfnUeVXJgwv9NnWV5qEQCpRoA\nN1GJ5ls9ErPvdXDX4WDUNpcZs4w8oWt8a0OiRsnfVxe5KkvMrPGX6a64COb3\nlj5TPf6QpGBQJNva6VW0dyhYwanHKBjo6gr+oezeAl0eLhTVGpExiuYFfB2h\nkk/NWcBe5kX0b0i0+H6NiLoTc190MFXuGKkcmcO6TQyWrxpv+zaeLusKT0Ly\nm4HgB/jPcUDKCLDlY6Kb2bHBSf9YqAuwgdSqDQO/AWDKStwXGMgRrKZ5GlPp\nBhf1GBdSsUMjqgu+280f6mxj+W3E0dtdrjMz27BGR55HGjYyMXheK5Rkd1wI\nRWdG92K/Uk12tDovs+JvIYL9SF0XUV3z7GWccskVDxuMO63j/0FeJp51q7tM\noS3rVjx1r/tnaOAyXB36BgE7+QxPhevDNb1M/Gk9peF2LWcH1dQJiFXS6eOX\nF5Wqg6FunxxAi8W/MNL6mqCK0TYKoT+3u6vSxm2cFjXQuYVS3I+EzRaaFbPR\nCjHbncxDWrqfn2FKzgRVFkUgFKqqjRAVTcY8w3E0QH/gTk2d25/woNLKH77r\n5cBt\r\n=B229\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdWi/2L17POzkJhny62v8SjAIsZJvEZoaf4iPFOXHRpwIgE+y/FYHZsIcWtk5N67Bl3iPnMnL2RXDsk297qMglkNs="}]},"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-fab_0.3.1_1539026445295_0.2598364048008577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.2":{"name":"@material/mwc-fab","version":"0.3.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.3.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-wEZ85fJm8Z/1pabqG2LEljnmSYLswmAaXq2A21QeUIIURcrgnqWZGKbmZh34HOpJUYjFqhB4ABsYOMmnJcaFzA==","shasum":"3a9483dddac8191abe1faab6122f34ff26a23ed0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.3.2.tgz","fileCount":12,"unpackedSize":34289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb73eJCRA9TVsSAnZWagAA26AQAIvZ0RS1uHZj4dzqOM76\n4nycekmAY+bDcLuRLdeGo2QJSXdy+/Vb10BjBS+pJwpv7ub7RArh7/U6JyVG\njgGqnu+q59eMC8i12j14pr0eX9NlN/nMUafWaSy6q2zXHjJbfOgwuTjIX12p\n5uj2/Zt53leTAT8RE7tZ39tO6gayIiD5V35NsLtFIB4oC3nFnBvpi597Bvzj\nmPKe0hN5Dr9Ql14kWgbK42Cozf8d9jsDqNc6zAcYr5KaMwMFW0BEo0Xnxptm\nBWjWZk3cpbAmzNjumOR/FTpwr/B+ih61Ld3DTFJIH9vmmco/Z5ZPtgE3UQ+6\nTprxqxnFgE+9W+XuNPGhR8fBM3QzHTVTLYdVqVew9FeO+xnkhPkDFYs+aFeQ\ndd87z6ZMbQ7NRmI5Hdl0XInLsmFdUAxSwwX9IUIhPle3cCIr1IH4oo+o0Ame\noQICsNd3A8PU2gKVTntPD972J3Xq9432M88l3GeY3RO5kXmch+JRmlfCRPYY\nx27B/cpn9U59x5qvwgr5G0giRSWGjh1qc0f9jbowdNiCO6bBZb6/uCUSGBfZ\nKWx50RVPsHtmd9KoHBrlVfgpsi4nuRLiF0B0EPAHJ0BwhWx+UtiWBBhIRqxt\nfHpmRqbec2SMpQHyRMOZoHA4aDHkAj9lnwBo//fJ65FCGTSBCQSkOl8BpaYV\n8IqK\r\n=WHZo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrbT2afS8Z8fn9NzfTVKKv1pCYBr2sayzlvAaLSl6+qQIhALW/ButrrxuRQwivL6leXoqsyvEbz6kiJa05IZDcUCJ7"}]},"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-fab_0.3.2_1542420360516_0.5804445031828307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.3":{"name":"@material/mwc-fab","version":"0.3.3","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.3.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-f5a9R3OTcs42pQQ11nLFwW91s7e+unhvy/yL15WWRkQerhVMIckLZC8Lz/Aid9jNa43+GGRZz9A4aKvM30uxPw==","shasum":"a5c7b2a3abd8545eaa688a02e304a9f62197cb34","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.3.3.tgz","fileCount":12,"unpackedSize":34289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBdEeCRA9TVsSAnZWagAAb+oP/it2A8p5u9U4uNAKW+/l\npeRJw7Pw7QlxpckhIlcvAzJKUSDh2w/yX+TR9gUuTwVmnGNbHj34+LWaYGwS\nSfU4n57ORJDDLSz7sW0kbFb72ZyLXOLbF859hhmZobT/oz0VeKjmd90Ncc04\nU6br5IP/KY4LTUKeraMRWJuixBeP4lKkQuVp+DC6b4aTg2L+VqYoNlBNYrIR\nNvZp/lZzP6MStyG736uVgDumKqPMMq9y0XUwZOTvsx9c4iONlMr/oqMDGoH5\nKojNnIG5Mq3pUt45dqCALzbTnJy0DvExw3WDJ2iWJrnthwokGnUqwXRzzZlb\nr2Lr+bSwP+v7yBC9hXOA2ka7zj/peGf63Lc4EaldxAxmJ3B9BxoAundfP96L\nOa+uIZCXv16pn8oOmnMAPPFiMgHYYEN/julAxetSmC9Pl/XpkIh8qKfp28R9\npTYGqOYbxfJ4AzbTPy5qc41sGJErqe3qt5fMjLZaoCwqSUDY0rOnf/2MiTzE\nyLae5Y9d/w+2L2utak4WjEZDnskDtYcvOs4R/AQ90ILePdzPREIef8wwBoVb\nWvYiSBEgqSUZLxGHrDAKZvbXoqyLGllCjWEdXRYzXpYZ3G9vXH90EdWIj4ER\nmEvEwi82Cn4o9IwXG09znqaa0RiqmRISTeypVOobV1ec0aUSdnQeNDKGGxWW\ncxdb\r\n=urXn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRIQhtOHKy5jwb/kth9Bx+CbJI/9rkD6lkTSopF1DiggIhAJggroOubVp2lNTatrxLQo6KUqSeeeL64YNS1tACNPGr"}]},"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-fab_0.3.3_1543885086114_0.8430091779499298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.4":{"name":"@material/mwc-fab","version":"0.3.4","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.3.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-SyPX0rtdgZHv3hfRD9o9n4yt/rNJ9F0MnCXAKUFKpz7xgKxzQmbLC21AL4u5zTJBNvQXpl7M0Jw8zw2ERxpdOQ==","shasum":"0d7ccccd78f140cc229cebdbf8b4dc9de20cfaf5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.3.4.tgz","fileCount":12,"unpackedSize":34236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEsN3CRA9TVsSAnZWagAASVYP/iSGVahNI/v9u4NAKXx4\n06rZvrfj5oDxBZKplrFgLKJYHiOL1waOLE+5qysbVJGfxDazD/wBeucQg/74\nghdLo8vkQ6Pq9CpCQupZfF1ryXqxFO1/p2LUA7ZX9oeRdc77QzV8anABIgDS\n1eBVBCzGsKkfUDwMEVZ2cgyGCZrfMyT9H7FCaf+OVpYv5S74p9tFxBqEyBYe\nRjJ2HOy71Rc36AutQ3VwjU0qEYklRHcNN3L8HBsbQZqQpXpvvRW127+d+Vyb\nAexG09+LN4JKcwGWRcdRZXx2o7IAqfoWMWG80VdiF8glNF+M/jCPdbdQsniX\neELUExGbhwWG7N3/SLw6M3o43OpzEuw3y2zBvItfaZ3T+jYN40fxE6AL6wJ+\ngCXsh1kQb1MJIydB+9HICFJnZYE8LipyiNPN/O/u7aI2jGUi8WOR9tMcyAnR\n/kixiBEo6n74arhbMW3yYiRyY6jZhFfn4r8K7LJXLeiXqrwqS5DWqAQy1jGE\n+jTjEfwSb3T0IKC10PBoSZzzkawpzbps2XEYVeZ8G+F1F/Us6Car2F0iRO2f\nyMLm5hsR+Demcoat7kvyHj8DSh8IzC+c4VxxIJN42VxgqzS8f2eakjOj/P3j\njn87bPIfNnWq2nULSCXaOk1r+tys70oDInaBVfmMTzVbEAx+w/R/huLG0E5P\ng2fz\r\n=8/6z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPtKt3pWUrWzxkSM/DpI0zHBi0Ix5Yn7snH5H1o4TFtgIgKG7MSHvOjlt0tLtiYJZeWH2wu1sQMyRDM5jUNbEQ+3o="}]},"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-fab_0.3.4_1544733559401_0.9364808467769932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.5":{"name":"@material/mwc-fab","version":"0.3.5","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.3.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-hKZVMi/EMRCANE2n4fhBnxxmW83EElyBdGO5JhwKx336t1TFtTRv8e+X1MxJzKAlVluQkZH391kCKabOPRYFRQ==","shasum":"b4638c5321937fa6abb280ffba613768375d1db8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.3.5.tgz","fileCount":12,"unpackedSize":34174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORXPCRA9TVsSAnZWagAA/q8P+QD6PaH/sT+d1YCjkgcq\nkGbIIjX5W7bdB0egCY2IDzBQvKwIM12y74edCIRu2/DLoD2+mkaI8lQay7sX\nPk1nFumsxKFKwC5fstunX3hFFbV2dIVvTbsoCq2qy/6TnhOSN6Ic3FP8PkqX\nSzxzGHLnP1SPC9FJOKcI8OBFxe4L+xeW9K4dCcWfb1vv9R5ohhrrTVkcTrbl\ntZWuxa+pKyboVVeEv5XeqmZCOSRZrbEynWVwHSdaDexH2nf3Lel2skRlcbk6\nsNi+ZCtCvJDWiQQw5dHWJkXTPxUWgc1V9NsuvuB/ssuN/jAhfNl1nT6pcXNv\nA+qfkZ6E45hMvLvSXkbEJXfVEUB+6dZbKdvXjpKMy4ahEeO8nzSjesvHok7Q\nVtU1c2/k6Rw6CQJwNTiY7zzre08UHwb54QXYhZ32FaPxwLtocJZtpCyRmfto\nTrnVVendDaaZUCsYLR2ptlcLSXhMI4jOuJaAc/hVp1hYg1JAT8B3GU6H8VES\ntTjWx/YKhBeR1YwT9ZbYvLb9IZmm2Tt1JYPjAAJZoEh8MAURNJ1XfnWZijL/\n1Sc2mP8VHs7z5+jar3HAnKFwKgEr0eMNyOEssrk1iUpr2LK/s8NBE3l3qyYh\n5ppDIiilJ7XYS9fbLKqLMySu0K9LLOUlS9KQkOh6sTpTdhIpAtQrHdSZRLsd\nTH/T\r\n=5SFq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChWxfLQ44DSI4JDPVR/EAhj94sm9By4TwndvoODjdv4QIhAKQUAh0ECBXyvSZzdd7Dgf41/g0H6+xbBVNr6Y2a3rLg"}]},"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-fab_0.3.5_1547245006726_0.30376842295805484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.6":{"name":"@material/mwc-fab","version":"0.3.6","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.3.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-VND/03hhxLSdF8PH7iopzMRmsT677I8TzDmoJVBghj6Rk5xCtKXuc2cwvSorSuaYcxQjstNqeKos+Fp2YZK6vg==","shasum":"c482d54c2756e43b0df28a65504daf2cdd4ff312","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.3.6.tgz","fileCount":12,"unpackedSize":33942,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWe+eCRA9TVsSAnZWagAADQIQAIFIarpGkMry044TFiOk\nOZ8gN678P0uU3XdAKVntAef6p+Dk9nkPxifeFYFOYkbEYAbzR2Q0DVxpY+lt\ntszCv2l43fEl5WrbqIR6X9TW5ZalBMx0B+JZo538P5Ppxbi2PWMHt1nrCs4w\nO162nLU5umWABNPVolNirpGecE5Y7osL+UCTA7CbH6Ec4ZZ9c/y+9YZp4Nda\nJhUQVQpMJo/n0lFmhfqfu2oegAmsuLpXpOQS3dsVbpuMeibJ0SYLQ/kyR28N\nDu4rRUtpI86Fids8weNrE24quUzUAPpWsPQVawr53AQTJ/cNkpF/qkAHdSpN\nlSJAsYisTsUBYje6rtucWaNUiWtm6Bx6wTYxavy6wLOMWZfXX6y8TMpAG83w\nbF0vsw3xizoc84OUl0vkdECgjdN9qbqTabzUvynt5/KyIs7p7ehJqU6VhtiN\nZPKiHRNyqx3RQ2DfrtYj55E5BhvSFCjWhKhyROYABd4vuJJUkhBrAViCjxMr\nn/w6XCmLAvBewVWEzBzeFioWCQE4jMWgt4Mcrz6KuoJ4aeEy1ZcuROxDiHua\n/KR3tYQSC9bCjFwsJx+ooTTzoyf8ExhQtuAxOtmJY9mhDO4hol2f49S1teTx\ncwcn13nQJABWx47XdSXN1gZ8KZgsJkHvoZlmN8knm18emL58J258IvXkRjGv\nuZX5\r\n=Z/Ld\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaCxx1AXPBXKWJlEYHWpVaZY5gWtt7FjPuw9fznVv/OwIhAN7uqFCTGwk9QGWd+qNIPJaC9ZxY8lyGxlHwYhYUK7qK"}]},"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-fab_0.3.6_1549397917912_0.09006066912056587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.4.0":{"name":"@material/mwc-fab","version":"0.4.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-Ui34HDzKUAAKxUH9vqSdPplJQ64Jc52DrfmNlGilvBOlhd7X2KvnwD2YCZWI4JYyQgDUGiIShFoshz6FPYdTqA==","shasum":"3a3690a1e4c12f99b3a51ce4177c5e32c5220488","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.4.0.tgz","fileCount":12,"unpackedSize":33831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvbYCRA9TVsSAnZWagAAA3oP/0145QsW6p3X7qvLGRYH\n+Z2b7IQ2fi8ugVTt/tHb3stZ/ZsS+PL649lvIMxoSEZae2cdie5k/dROpppQ\nKn4DmbaltQHrq3fWPEn68+VSFX7jR9EmElBoqWel3wlKiIXL+GeCJlwkwZYy\nF5KZN9GbSDPyE0Ye4YRrq89PHNMIht+0RpIfOEBAcEoMHDMhSvkeUJaRwujU\nRPwF5OKko6Xk6W0t2tASLwY4VE+EdLrnFvFaDwtyPFOtOe/KHhUNKUlWjIg1\n3H/rb0YEf/GY/I1fPUYh8KUYQjnN8tzwZqBg15tEYebMc0y3h4MIuv2pmuXW\nQa9x7x9QWy3DlFxXuqIVJUlH2/5B/UyJKq4pptMs7BeQysoBmmeQB9v/l19e\notMdxq8x6J/ouYW2eQphkXDZCEkcyZKsn3Wr0nOF5ccF5e0n4gGplBIIFgjo\nF+0efOJhJywhM9z1nU874uKsMTWt3FPDNHvDvhmAr1toRfB6d3RgoWF3qG6U\nyw5XJ+SUtnC1qH7k9nSNUOc6A5xPIbiL2T5yK5x62QXLWRGWGEdsr91400VU\nFQF9CUnEtkqgmQ3AByIPkN4m58+RbeAevKUnjTZOK1vgic+7LMyzcWhm7K28\nfNB0Dss1+/jrQ74O2I4OQz1RBpEz6eaE4BRTV9FtiZ7HUb1Zlwz54P3iDtrY\ndGY7\r\n=ON/P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXlPcADFNpNHdOxxGXKJe/yLHg9nUaPw6alaSzxZhmbgIhALhmxm4qYLkCQlpgXBoHuol9wW96DvKIIwOZielZRR+r"}]},"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-fab_0.4.0_1552348887141_0.7703911650778668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.5.0":{"name":"@material/mwc-fab","version":"0.5.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-fab.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/fab":"^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-fab@0.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-JqnoON6GuZUPokXFNcAJ/CiMVwzG95nvRYiVSW3TJRl/PCCpNCcc7QwodKDlf8dL64NX27/p1FgYlXAys9I3Ow==","shasum":"2e9b3f2e9dc7cb8e55c5bc6640d557606c8d8c7f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.5.0.tgz","fileCount":12,"unpackedSize":33857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmqn7CRA9TVsSAnZWagAAqv0P/A80rYJ1qDwgvyl5rOnZ\nE/s18e5mlEibnJhGhtrpweAjWF/sYVFL5gO1Cpf0JFZ0HD59AG45mJMDnwR0\nzzOE/tcgW8pFeciyI+jHUoZrbLlhtjxNdki2ZPDQVSHU+ALRUvhl6tTGszoT\nb3oD641W4iuAFcm8NN4hCO5QvLgOzit3H7J6SAUwJ8EU1Hj6rknIEZM6VPtq\nCfJsXJgdgYUo28M3iTcQodXsztGZN8kG0mZpEOunwNsyEP064bL21OK+yCci\nSFVHqun+PA8DY7JtoVZIMw5EpHZvBUxIrws2Xl8J6hHaCvdLXiwajd0DTUjK\njGh8Z82nNCmyQbeuQQC3121oPYkpbNIL/XnQuqPcjAdn6fcHeniQCBSL3NV6\n/loDyZSlwM6stvlk/VT3AW53M3PcBtU5VogxMaq51R2PQ0DMkyCTnVoztqZZ\nZr5Jcoqy/e0q1r6yf+7Bj8u7MWSZ1BlefGKxE0ot2xgq4HCEWIAC3td0ptAs\njk8GyfRB69dZJ4ggwS0L47zUyNRIHdwUs8shTRS1k6W55jgLzpuyDLQJsaWB\nidiqKuOnenrhCTaCNobS0dmvH/t52a8Ee2DIq3eWYuRqst4mGEE/9iwFKnlz\nrNRMqjOqNpDfX6JzHtfolxx8TplFgXqJllxxlk+MYsm8ib1izOnyjLPcUGs+\nWlCX\r\n=nGxU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMqngtsRfD+4yI1mMC5BZsX7o+D9BKrcV72TsVzUpwHAIgbsv1kROqfiRbJe+mD3adqo4ukGD2spW1lFfDb/ordes="}]},"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-fab_0.5.0_1553639931445_0.40750231890250355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.6.0":{"name":"@material/mwc-fab","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-fab.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/fab":"^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-fab@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-rhIbHkX1JilSJdPaR0rwbfcT7v07wTNDB1kT6Aa4cc62+gJTkxZ+r/W/QjZlW/gvtijQEHX5f6JsIc1mIDSfgg==","shasum":"23a5fa9f8bbaa9bef8c0ad9089380110028f979a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.6.0.tgz","fileCount":15,"unpackedSize":267571,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAmCRA9TVsSAnZWagAA8nMP/jdLXzQRqd1QaPRz0Yzu\nDQHSp89T/u4dmn90lJoN5jhTfo2JFkJYjSm5tCFW7b+wk2sRoeol8mnDDaez\nJvrG2Jpw08F2s5eI8UY2UYxcwcEECZVb7detQoyqcoxxzXwDyK/F5K5kXAuJ\ntxjv/wGx2FvssqVz2hKq4Tc/9hDO60sPcnkexI4qgcf5Z9RNNorSYaHwGaj2\nbbKWm9V6I1tO2jP1PIukaZ/RQS5BRBDCqQWM/vXp/TS4dfIUNO6yCFabMs4w\n2qJdlYUm1IJRlQaUd5LFucXuDBkMJDKbhLygTwdISWqnvLumULf+2QLTu7ZV\niZZXqHd7X8ZItc2ojqTTxIXtgiqjZrqh9lBB0qInjJj710w7B6TlPX2VAVWQ\n3z/Vopt27jxCtzzOxeTWkT0kQjySv0LGM9A9hxyYJNt+Zw9ABkvlkbUpDtfX\nvugzsH6nrI5HTIdfwL0X68QiD6DbHWECH0IOxWBn34lpTWyR+jyCCWrnFTGC\n7L4SMqP96yO+8BTFQTrEgt18JmJO/Ppp4/M61VzUpufErmc+wjsc38PNn4q/\nSF+37gYWYuC0r4aZSQkBS6Wpb0VGoJiD71DY6N4gO/rB1dTd4YHV1WrPSBdE\nZFNKXsnvgFFN7DdG45dBfXocEfD/6Pxn2PTLErhsCwhCt4iEYJZAoQ5QXrv0\n/T/p\r\n=7VJC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk8CbKelPvooT/mr+25BpZHClgMP9Bj0lqAqj3tddp/QIgRTerUzZU1yQV9MqH35oOh5/4jVRTa+rjW2hebNd7fSw="}]},"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-fab_0.6.0_1559773222237_0.7662833354995229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-fab","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-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"^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-fab@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-24MwEZ97rpw/W1ktx4P/yncf2cvNJyFQK2A0/pkkD7ZyphWGuKoa2hj63Avdyi0fNnEDZTTM+F7vP4RQvOYGOA==","shasum":"c5c7652c55db832f72a48e9b459845677bd2c03a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.7.0.tgz","fileCount":16,"unpackedSize":49932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9oCRA9TVsSAnZWagAAoOEP+gNt1Qt6EeONPCCta+j8\nSMYylLelPV5mBTcHl00pniYrf/RHd6g+8q8oOkzaFqsIQsZqXDYszAVVQfkh\nx6okGBaCSGNki/nMxmVpx/EOBb17qMZhP9xlyLCSoduaGz4Gy+p3i3icwCS7\n5Mc3EDii56LGX1tuoT+wqxb/8eJjNHcKGUdSA10IGMyiSFxF0AJB7TLze5N/\nWhFb593oFPZiRLw2OWeWYK0AqDprAyGR7HVQUjn8U5kd3+OmFULIRrzEy6uf\nGPQWNQPSBMIZNwtblrc6UpAQsOSoD0mpIQl4rzb0CtQsl6Txy3XPhAEIiOsz\nnn1GFlzEIHWxl5tzGvh+cZBVWc+1/DTWY8HQdhgiW/BAhB7/VzxdNE5a7DKX\nMR5DB0sAHFjzsLshUblcMWU92nWNR6tj6BbwFaM7s75/YLEY2g4zSQkM93ny\neS27yzqH1+h2MJj7IlnfVx4Uls+fiyGkIhSHzsoRzAl1+oIlaKS2LIxttE60\nOjM903vTztH6d1J99q0Kf3gRgDtgTfjd4nXu5+CWGK+bPKqgoUe74wINOg73\ncAdCHF8e92lphrtJ4lKPjqArP/nX3SoCOhbmWt6iuFH7keUDZcvpwmpx/AWN\n9KNb+1P7cOYp+yl4ek46Knu/c3tKQrS29OxcGLuLlqvfAxU0s5EOOQP8LKje\ndzy3\r\n=/FlM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDar1jPJ7KtbZUDCi+zYHkzvU+hnsoGzGsdiBGagX6H8wIhANtxmmNXT+igT7t1qwBComW1j40PbopiI/gLtKwxCG7F"}]},"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-fab_0.7.0_1566941031676_0.5633753150206413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"^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-fab@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-iBI0DxPQ1sCxgVR2X9E+488DRA+gO/yGQG7fWuLL09VDz8c7ts0xq+79BhxsiVMwrDfz0D3XXxDysFkZQINytQ==","shasum":"6448fb6dded2b57107173647c133506bffd6ac71","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.7.1.tgz","fileCount":16,"unpackedSize":49958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezgCRA9TVsSAnZWagAA+dEP/ibBLMyy2lmoKaQYLb3e\niM9UxtO7ZHmIC5CigapdGn/h1E7SD3MBhWWNMcBGSmRydA8vZw4X+BmL+LIO\ne4YCAzT1ajPdpHHRdnR4SNAEvTkYfZ6VQ2SJIslpUucJbPR4XUyCBt4yeMyT\n2qInvYg1kk8KcIGTHmyrLvgUEtzA+r5zDSmX9N5puhQsuO71swP6D+vQSAzy\nrH88OWXBIPZPvwJznDmaWkzwTJ8d/3Cw/gSi1B3q/mSY/3F7TYQfsx34ou3v\nknTgQzWPdn/NT3TMECy22M/NpstXVAO1b8CttL9bLBRvA0yVFgD9ewfA4djs\nk36cp86ocu0yjnbjlf6oyjBXK5Et6GB2KUFaHQHIdV/AVcV7t5rCDZ0bVqHS\nYRaIekgQp6txbgH3p0buPJplsIN8F9enrcQqEcSY4sE7nC4jswZAl4hUG/87\nFXXdeSYWb+yLMgDszXA9kUEaw43wOFwZDWcvjTt85I7eRJPmrNdXRE6rm2fu\nMNJExznA8P/jx/P5IDXBlQ9kLeO4+jrGkMjr6ampMq0HngbCkg/H9bQDsxfc\nKByrShADmz4JiQayiPjaQXO/tlLLWvVVcRFl+euuGdgKA3jxHvsmglNxHCBp\nZH8w+Gjt9UxQgOp8FHHTvsOWGbTDdxKEUbykaZOFdhf/L7eNrkvXCLMFDx5Q\nH0oq\r\n=G3fU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBQn6eMTNR8QY2rEd6SC/JI3PqTgNzXM8kNf+yG5aJkQIhAIRPC1iauvw9ycyyVX+1ldADJhjv9OdKSgPAi18g5z9f"}]},"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-fab_0.7.1_1566960863612_0.4018001069541779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"^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-fab@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-IzRIYX9Xze9cc4CWGrz2Ncg9U5PmDTyKFVcHwGmyM0UQ2Il8gQxrpt7DxiDQT2gutKhlr+nHo71fQifk6Zi2mQ==","shasum":"8e9afac962789bd98e2417712092f1358f355531","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.8.0.tgz","fileCount":16,"unpackedSize":48900,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+mCRA9TVsSAnZWagAA3roQAKBFBkvAgk6wxpQhHsnn\nSzDERZk8M+Loe4G2sLq4yQlUTsriWAtb4kynOFO4qptDON69RGOtGTiZJtak\nKiTdzmOaTQsZcgrRfOhDFtmoHO/GGIcnywsa04uTM+tK3q0Y1WfQMyrkTHCb\n6oZnYq2AByh6eBEbujyXr1dI8NfqQsqoj7npe+rs2AfLd/n0PhC7NXO1Ex2x\nj6pFy70KF2ugTuzUd0bF8afrKo4awp7e2/oMV0MEzjrRPrUXUaQ+yCKyLr/r\nva9p4v2PjByD5j//UVqZfC2SnjDihxbLjssSa6wQXc02fpTkTbOh/Yo8wT+S\nPjumuXfA4ZiJYeuHO4UP8fz6AvVJAGYwEbfxEU3OXTgaayRljUmuCuUtH7wZ\n5Y4IHHoqTfim8KSjazWhj86imNkNwJwzxyWDUlXzrJ1oLJ+mPL+udyTngqMP\nPHOdOPg2GosUM4K/m6BFUfc02PqevWequFWWalZrMvyMHG+DJZOGqUqqZvKo\nvwb9R/eOIOmdlDjVeY42tEjSdqQRieyRH0mK2SHhA4NE7QcN+sk8aKrt4eAI\nvx5XsKbFmpxqzNXSPEm353NUg3COQMWolet+wa+Wlnj48t+1PbACXBxKM0eK\n2RrN6EUJgE+VrKz5TjL3TwWuQ4mpClMdgVr4aDdaADkjy2SW4dVhP9uLAof1\nKv0u\r\n=1kbK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9sN5BVvJAv50VtF5lXTmFaCzI/tcUjqUEBZclZmXUfAiEAt4L/wYUv0ggN1zsjT+NX3fzC22oPYnx/rmKGQE+nkRM="}]},"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-fab_0.8.0_1567555486984_0.3695379757497552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"^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-fab@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-u8rpbRSVvt93smqNSN24MhxPE01bs6XR1DVn0sVU2M12sesZMKqvZ5HvHMD3j4fy6VHAKnRL60yikIaI8Sh5cQ==","shasum":"b2ef42f25242cbe2e3509ef2e4884407534b6db6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.9.0.tgz","fileCount":16,"unpackedSize":48321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeRCRA9TVsSAnZWagAAHikP/iqyBVrR1FapzT5DCvOJ\n0QFXDST46tu0vV4bkR59exZ6Y6OsuqEA1w0gQ4h7else5E+X/lpmo41f3e+w\ncK0aHXJ+Z7lhcMSOIQ7lSnqS4hZZKgj7/nqLNkvwIrDJQIZWoIruG85oeW+g\n+ZBrgSHbnzIiFCQEsd9gUWKkCX7EOOcwgv0jrsjmJRp4BZBeM09Kbyn1YuAu\nbLTAaQ0GnZvLv/utAHuVIAiqnNoZ9Q36wwEaQU0Y61Q26upiT3oqQ0r0SVYN\np900213VUqUuSeffBIUxv0zZgQ0/TW2v3XNyb26fnI8V7lFdSElYPW+CxwZu\n49y8KRRGRmL4vDc+GOstE4UJm6bPGYqyGVtn4uo2gmDyj7bzRbObc8DtXwf+\nLVGjYP0mxypBPcoYMAJVsbRW//5cixnnv1ARQ571V/3OplsK1yCktsrlIvXe\nldecy37g36wojhUKz70735mdkGWsCRXt3EJKvHxxgkHVWL3dGbATs6y+mCC0\nWcsB3WDartrSbxi5HMOOUTnK5h1JSuW96pE2ZJYUqltelOAPCXqZh7hOPU7M\nAF2ni5bTo10qVqaKuCxP//UexR3zFApAJLIwjtr5ZtI7bURvKL3ZDecL5gw3\njl/gDk4LnXb7dWN9dEDpTAmoDIYYk2GZgOetNXoE1MiyenvR2gKgaVrOXQZj\nyLXr\r\n=a9J/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqb5SyfrXqfUzvY4NwHLTln/SN8XKbw0fwzRJLJ5fsVwIhAKHKCizw5ZufJYtr2eoumDm0cX1cCZQaiiF7z+hxGmps"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-fab_0.9.0_1569548177375_0.7372906533891719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-VNajVdHmFQelgfevYNIZTLrXDCxJcMY6Py3hOcbMIhg7lRIlKZnTn6mfW67AjEamyhz6djyCvqQ7WcD34GXpsQ==","shasum":"3eae8b21a9b5e488da9dd3e9f965d709dcd4616b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.9.1.tgz","fileCount":16,"unpackedSize":49921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4FCRA9TVsSAnZWagAARJoP/38+9n8CRY8xRceJ3pm+\nMiDZAA9opOwob7Q/03GSGSZn0xnVCeSzkbj5uoLytHm4CZb2oJAzhqIPTtJQ\nL1SkbqAbL7Z6XX4BT0UtBRXfcv5/WCGWV153AhjzSfTtz+WtVH66N2V3dfRk\nvIdxJl9FKd4e5+KDURjgN9mmSdNUx3jyoBO0CHXx6FFYAnwNC9tbIHMEnzDQ\nRnDYM6FKNoqoVuBC+bJlAshY93x1Kpr9kt43nD7d1ecTjx7Z0fzhl5InSjC6\nE1jVs02GC/BaMeG3bJUua7ViHPKqjeEOaqilP/ydt5+OG78uHUpMvRwBCdIb\nF/BdatyIYcqVob32h6BgpEXsJVPEsuIrpwsi+kdYZlhi/hEcirOPQYJj+z+v\nKNCnwUUDorjo3pTtEfRp9tHsHnaQS1vCO8PFbDXYuagcz5Vv2nwtseY3QsOD\nNl9Yl6BBmb6cdb8mwC9nTvLFQzLeSxRD7Th1LS294Y7frDsr92NoIsU/VcUy\nCcFLeXCf1cALXksc8v4v55LMvYoG8ZhX04DY2siIhmUTTFJylm9mqAmm4y/4\n7x7oiNqm44o5tY3F3UdPqlNzyIuwTPeQIHpWNq+NTmculLuV9zCh+jKgAOhy\nLXIzQXYE/MDkRM/e6X906MIsYvB1raOuMD/YkPKFsLg2jddMnTBc/FCnfU50\nYJSP\r\n=luEt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkGFoeeUz43bAJT6eHP/PbSHfDKZXP8rRG0tjQwwPKhAiBMIfHF8Y6tfBgoiqRrDqJHx3whgIYttpfoFkr+JTUHEQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-fab_0.9.1_1569877509343_0.6449400001512229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-TrzIsdPxqz2M3tmzw6XjoVfUaJZbzmW2yTfL6/ADdHWqUubHPh8ng44Sv6uQag8x0jUZM6xI9lRwrHetgkuJUQ==","shasum":"f94553e1b8a7ba3cde9c508f130b3df01defb32d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.10.0.tgz","fileCount":16,"unpackedSize":50392,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAUCRA9TVsSAnZWagAAuI0QAIRQKSbnagWM+dEApFRz\nAypMvPxy2WW7ssbyhsrBzOHr/Ru5MooJ63mYQqY5CEZN94NEPklt2l18fcD8\ncYpBao5aR2WzZ/vAak5DAMeGXXgVlLBkXjOfHc+JmkxfjbS3KO8rZJ8hhcGn\nf1ByNBgzXRRYFx2ihqCHNSqZxYuTu/2ZOpWnf0xTxoA6pqOSaUGB7UYdvG1R\ncn3vkhj5+O36wGuOdlPoduhDIrmcCFm/havTrkdBJIIKPRufdC+FHna2Dc3x\nmHo8GyWm06OKMiZUDoe8InZYNvK1KYXQ3cyl44sqjuSr56+EssfhjE/jpRjq\n/uHWNsp+miwfikHwiezWS0+O4E3uOpmIC5ovDrBwZXetMNIQI/grCTuAO3YH\ndyodkhApA0exn9vvN8oKbiZq6x2OjZX+h8p7Y7elAtc9QOd/SODx9BYT/hW/\nxlJqlFC6Jxl2CHrQxt45rOw4JvhqMm7Wr54EJEbsnz6eJq38MVOeyAtkFSHW\n79iVqkpDrGq7jPRqA35oTNvDZ9FmcMGDOE5jhOibu9wCBeTVoTNzCz4Nls4b\n2tKLMEu6ZC+Col0b8WmoStR8/wxazEMTh1wm2sbi7t4t0zcumeb6eE5g0ewk\n+A4pFaxVP44DMvTSUX3IEX4yfzOLOGo4b7IPr+08bAwoM+pGPzGusLqk6zcy\nX87U\r\n=VX4W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5MYQp2Es1bX11eYcyMx12g/BQH6XztxX7FMqoX/YwfgIhAJa3tLut9pcdJGAOmAT89iwKiFvY9BiLsv/gFpeCX0v+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-fab_0.10.0_1570836499874_0.9825415866165392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-487t0OiC2NnWmTEEaqn9MOQnB8di2+O16BuEIZbLTYIYjK74wpm+MwgKB3rzxJ4g4B/b+EP+ilIghzq+ELatGw==","shasum":"e7297a2653c01004b6b69974a6ddee091593614a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.11.0.tgz","fileCount":16,"unpackedSize":51660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3vCRA9TVsSAnZWagAAd/oP/AuI9QsfqFguwf0HnLTa\nYaVewNxjrnoIHXqZ4y8Lw1JCW/3CoAbgFl88E1fG/sunFTIta35Y3sIfmclR\nX6CpnPwTdwRBU0ZqHn6YuYUl6dHZU37XEAUy56LsgtZI8xM4fUzZ8aWHxRvL\n3lhgwAtzhtuzdPv4tgrMdm6DuYfNQx2VQ8Hy9Pkqwoyy2A15cC2X1ItCtAw+\n+4UeRVe95XpPAZL6P+lKNyr+9ok5YHpmbMOQSOrrqEfpJlLvHtqORduwKzFH\neH474cxcVA7TNRU4vcl5tT8BULBFiYj3h+i0TeBvHK6lCKN/ihiZUVJc9s3N\n5+YyYYnNo2JjMQehOHyeFSaYuka6qfkBYTNY4OwuRvMWD2qnDKXtF1NBfIV0\nlggDwbmFh9K4Ns++iIUXmw7Lzyy9m3hY4YHy5kKA1FDw+dt5JH29+hN5zEtR\nOzQMFmsvtfttB8n3m3DQfQmmmlwuoJWDMevyGkrSBKAFem1gfwG/DMrFnyqN\nogNJkYkFPh9R7hBxL3HOnvjmvFQ0THy+5xyOH1Vwz0QlReJQ1QWRFbZ16AID\nuoSVw0J89M4lncZO26xL/WsDq5yKVi+Xcy1G3In6gQOlaXh5TpVKi5VC0QWv\nbBVTtKR7oE8PSJIozPxQIGpRPSiYNg3TZXyr5bvw+jExmjG7FDo3vkzqjIs2\nvpZi\r\n=69B9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDyiw/gVXSD7at2en0PqotD9IYXtmrkzLuaYkSlyhR1OAiATNLm0vZ+fjv7MtwLc1NFcB+rw/Eo0dFOmHJrPzEH5Wg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-fab_0.11.0_1574804975004_0.8420862460925671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-Sqci0kxAYEvTuzRQDq+dnW76w2tAkKWHaYLSXv2U74W+GLRkzpABiC8hsyzv2ClRr7sWFmUDZUY4LhBXUiRg9Q==","shasum":"a00cded77e921f1f17c061504f8e845b6864fc44","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.11.1.tgz","fileCount":16,"unpackedSize":51717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLECRA9TVsSAnZWagAAAwAP/RFC+EAMTcWjrGukQs3s\nASjruwHn7oZfl0mL2BXg/enjNzHNyHI23FDPmaTQ/q0HGpmlrCt4z1iUoaHt\n4uTfWoFdf7mNAHrhUplkkjGNWa3L9G0uHGJSJWBf43PFnekuqoePltmshVcr\nq4EyRmnCYtfRu+8cREjUKjKU+sM1H3uUXqGNSePjeCE0gNuXwebJPoJRrFzB\nO0KHsAdD2qAsNZfpdoFoFxBVzWOFBqBdkqvlcB1ZzhUihN3865LugYNYy9q+\nw2V/jFLUqERKM98dMcXbEifk8alykjonmPvsHHdig2NWAn7kMGLVfiDfwuZ8\nK7WpM1++1jiti/yzgXfMGCdO/JRJV+NymIz5idizgxN+tpw7w8Fcf6fI2NPW\nDo8M4uFwJErsyt6l/pQnK7ivJ6s0PsBwFM5ZkJxc1tdFX6rvwz9QxCNc+7QI\neFslIYvDth77U7jarIEtD4TkGRqzEn6G7wUfq7Z5pNjKFbalxWxZqUvZfDdD\nSC9sMPTJijeUBEWe7WMz/DyGMVsSga+eUQN/DN/JFZCbu1GQlmi2wVpwV818\nI/QY8l+zUWzmU7HTIcMiM03WwmPMsd7tAFgJh2IsWpFMPazuuHWdcaMNxEza\nytHRBWgWeT4iOkao3nZb26RqvrBxkmV08Gsnh0XhDWJ4m4PMQYgZbYkt0upc\nKAuJ\r\n=edXi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSxQHK3pIIxSIFIuk3A3J03e2BfhVahKqCnDM4a6DMOAIgEwZeEmp7cOeFgPVO+QsWx4T2z3b7PR8Mz6VVWPrkwfc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-fab_0.11.1_1574814403648_0.03921315794041602"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-kPQVfXn/KJg5Cq+x5vVWdikZfrWkXd9nFSvx7VMatnhX//CzbQAwxDKCefxBjWOGfmlt04dkTkMniFBPIksmMw==","shasum":"38f182fab06c629ca7d574182fc48c4d6e2737c4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.12.0.tgz","fileCount":16,"unpackedSize":51501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkrCRA9TVsSAnZWagAAiNEP/RASfkS4rZ0WS4+xfpep\nuREiOyaw28W3bWuj4gk2KN9HAPSg0ft87lgc7JAvw8WK11EgNrPxMJKFOY+p\nQ1uTJfmTRqkG4/WfYMJOLxJ9OCzN4XvO0vBabA03a1J1X3z/StC8Eaou3EOR\nnl6jXrwNEekICg4rO1/tDh4iyITElaSMnji+lKkbO7mz82kV/vgqv6vDiWzc\nXemGQrJtQO/ytbWsPM7a5lbISw2ujO49wk/mg+8s0ouCVzEH6niBBmPrtQpM\nobKqOsqLJ60qP7QZZCSwrk012dxneumCbZDYkC1K9L2q0j2r7wVbAIfDOu2j\nZcKxkWXHMifFh+VnntjVNk3fKYtl5Vd6nVsDVzQkwM+PEdlEGhzBbEH6ItYR\nCC4sDy+9IHKtYKoNnx+sUJADUKFI/5cEi36GreUxOeiwWim4yUAvJRM47Emh\nDg4gp4wv87BTdwo491949D8lM9Tlbjdkz5T8nG2B/jlqzdQzEkoGjVcfiGYF\nmTG9C9gn4ArQXxMa+bhr/x/ow3ZtN/AJXzAXP3fBeWHMpJrbYCOy/8vH9Dqk\nRzYJSQ9ndbp+sC1pgymSB048H4JY+sMwrHAgzRJbrFuiGE09C5/4QVFnjn/C\nMFIdp9FrBt4Xl1gUuTtwbXeZnhCZeVSIsBsk+gZRM0HrEP6usW8ZhZdw6z9e\niD25\r\n=N/dO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRaP+TF88Om9Leve/qVrYUSYazD9f5T/N4pKxh1CNcCAiEAvOkBZf5OrpoqBWVtNTcLA833jyNEOKZZO2d0qKwUM60="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.12.0_1576626474684_0.546264477519085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-wHTUkl8FQuXFw3WVAWuIESwj9GIGyzuBLYBsOVL+gUPTWBMI446GPl+MF7eidJ7MmevZmVAxXZCtJEwUG0/04Q==","shasum":"42ac18dfe78f37153ab2a786eca2ff28ea58a563","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.13.0.tgz","fileCount":16,"unpackedSize":54119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPctCRA9TVsSAnZWagAA3v4P/0lQrccKNIx1HyOuMgA2\ngTloUgzvXAvfT41BIqBq66j3nlvaWG1wJgmB0k8xwHuY6/EMb2auo94qMn+C\naC/teGKv4Y9y03ZBIgfEv/8Jh6yWvzE4XGaSppuGouyOfX8diaUyVwqYjq20\nnlOVCnRRo4+MXCd0sOmYCm9zKhnK5Eo6v1x8JY/ca4ciS6YltHq4E9PsvtWN\ndozTxLeFAZA9BlM1XWyBMllKM6Xnllh5PapK34viUaNEcUZkRGOXZthbHVRS\nr46atg+dI2EIwYJ2k25sbnGi/3WuW4eDgEuPgDthCHYIcR2EARjlfCeJgftW\nRTEyG/K2z6pCOK4S/p+h1Rjm293G2VBW7ByPwYRysTdXWaRzspJL1Qf7Bi4W\nqDCQqwdsjQjdFKlUoT77om/ZrmKJKjpAJqgAjP9TSJb5MVNtYpCHtPyVl6IU\n7HdDpUeI3k4rYZnQICbBiSrrYx1yImEOvZDs2hK1n8LTslWKaaDw0tnpMXKa\n+23769iuqj9bCNUqkL6St6Q8KFihJoZSUFpFnHc7g7A7pNP7nxfL/25qm54U\nKYiI9fKn41QCbNQMME3WZ67X/tTpajOdwEanMIcFcRUI2Knt0+kaRmmBhanM\nDFQXE8CMV9ieeSFe4DpkfEULheHIdx/6kIPY+TvqrsHeJ68Bv4/wsDyHJzGF\n/fBl\r\n=L227\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq8U5Kar/tPtZak5pG/ZbpMCmISIYzqlF3SWmb5FeQPQIgNJegAw/Wb0950+ny4aHIZtZ2e39CjnkIk/wHEBSL9Mg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.13.0_1580791596903_0.6710571292763305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LoRP/bNMNlaVxZooqqXwrpvwMY6idK4fac80Cw/ZiPE8K+PTFk7GpRB3mEXZgOXMEqWBk+dsNPkSmLwBAJi7jw==","shasum":"b622f65b22b014e35ab3d905c3451166958f7520","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrJCRA9TVsSAnZWagAA7bcP/RSkaNbfhTGxY1LMF47v\nxRmIciqPfi7CgEZbYSQjMMLxw0EMaP66+hOShTL0yJZRT/2gCEZ/3e/6pVwb\nOHz1QjwFoR13NmYWivDRqJioH3msu2ST3dix4axT2Ko3xwMe270Dt/7quRFQ\nHF2a+Icch71Yty36EY4Fy1PSJbxlpiAbf2a91MgGZIqWGSET0b3UyEbLMEyU\nx5eyCq8p6onvLI1TRWm56pND/1llka8TIVU34pe2jhoXxeeQfhHHyC9uvkLK\nBZwpTlAgi392F62bF027xxxkeeB3nxl0DirvwB8oH0z1mOvW3UnS7FkKwa9R\nnbDTE1B69tgbL8H5XMNkVKzgZaNvSzIEMW+xXvRn/hgspg+buqjdRNXaMwRr\nPlim2QBb5FrTuOSJ+h0XCYxUemVvSgg6Tlp+Zn+pugpjWcsLyzaoRQ49ap54\nhMTvcbpewW/XG+W/iemfpgRvJExemyrwwQnE4KWHC1MEtEGALBaQsO+TkPr7\nJnOEF5D4T44nf1x3vu6CqZIbqN1CL7IvXZzJaSbd44LJz6IlDIIJaYGFGJK2\no0d80OgThM3aXJnU46qyfev+4MROwGP7B4NixrbcHOJL9wmgjpfSbW7MR+7Z\n8Ley58ouV++1m+C8RIYJKsSHwzByUl4nubJ0p1PHadqO5S61OBWEbXjvtlhF\nHoTU\r\n=iLhm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOtsCYddk9IYzdBfWeJX2xlLBsoVE1A7UTqU8dQagacwIhAL2x2ZICFA+1OYBlCtlYNjh4p2j6XRdxS1qz6X3McL3/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.f790f713.0_1582856904599_0.1315247320575852"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZcrCtYGI8ShWfwTTXAdmGXn1NeRFa7cN6KrXhAw88hFXaapXjmZj7oMmEBGWXVI7WktF3/bSK6SX63SiRcYTLQ==","shasum":"75bbbb71c482313563ef25b4e07cbf1bbb8ada89","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqsCRA9TVsSAnZWagAAktcP/1AhsEdjKFm9Nhm41sbv\nCBNWVa0MdwWRFU3ZPU/22LXHoolkso6q50Icbhoke7c2kUzX3t8ND5thrFDb\nCYoOd9BeR+dcH10ihtN4j7eDQGHvVz+WVQoHfCF2Md42TI678wYNF3KeggOz\n/4kPy5Jj1o4EVhUVbGWpv4cxSdCmsu2QIf3F0Stk0XQirmUuWuRd86RMwVO1\n/Z+q4SZAJ5ADb/FitET9KJq2pTGXQPr6uX06uZMlIay+Zn+xuyVYthy4+OSM\n6WZ2JRnmWyrWNd3qsqQfiEIXtLm4mXGQ7Uo61fsXzaXUFHfn1WHvFnNp9A0M\nQQjiRxX6ZRAr7L9A2Lz1H2N2YB0wOvSB0bIRa6Yv5OkWcz+JuxR+xHZQzO+Y\n2cIkThJ3bPHfb1oht48cfSvU8kshoyGZlcn6I12wZzk2DJsslF6dtLmj84QG\nAcH8RZ5wx8MexfDGZxKZt39eLTR1S7u2HyJT/sFN10m41w1+ZyYxzOP76+Cm\n8e+R7lGg3va8PqNi48OsNizlRuUlLJDfIpBW+0e0mflXfVDbRtbKKANUGrn5\nDUk4RaLjWaDx20DOmru7pI8r4vhC3RGlUErUOW8bJ/vGfVtFN1WmHNjXzOUS\noKly1BvKL7J4fkJEGpsuAHmd+nE1YNXqxuiTQCYpXKzf96vlvYrmE/SGHWCs\n5GL0\r\n=o2Gf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHNF+YpP2yWxGLOCaTWLp83nIyYcuFmYM0Pn1Pqt7L2XAiEA/FjX4beyJPe5RDJWKJ7S2AXGcEI4L5kj7m2rA4n8Hnk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.c759cfbc.0_1582934700280_0.9789904986890012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-E/pHkWXO7NP7hP6rNun0R5Td2bUodelMh7o4fXD+hBUN9d2Sh1aB3UBc3xPTZGDPcZzwXHNCZMw6ov+6Y8hOFA==","shasum":"bc4def64828d3314051256ffc3961391c3c9c04a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3UCRA9TVsSAnZWagAA73wP/iLRaWOu7GORZzWnjLR6\nyF6pePUnY4wbbDnfwutI8oBbgljlk+NOd7cj5vhLtVcQ2oy3Q1XHvxzsCoAR\nGtdjJuvQugK1rsVq8v5uh7k60Qq0USyD2cBbTqyrtPXXlFAjOxpRbNW3hH3P\n9AWbtLzHfLwlO0kfM2SXBw00YN0rMmM82AdQHerx+WX30g3IifyYq8Ag+YVr\nf+MaLTAHLFYcS2cZn/RzzIZNcvDRoz4q9oOIfD0ruM3BJtH7aAA0jwJgsggW\n0jo7YOuaxe+IT1hw2/Zte3KhbIc27HrZioDmJMMEQwwpXRVpfDpvu0ghbJYI\nV66gmdnh7/8izs60qWzB/FnKPIdyoCL+NCoE4FhCFArttNWtQ5+oxXemS8gh\n+1NvymxxN43hYltNb9b6uZeLzJC7a4FHFR4oTwSp47EY5yjF9e4qvYukCv8H\nk1Hyb4lO3Er3Po3l7Di/uOK+lROdFSaXSiY1KlEQELNJkkoMNxbalDKy0iX8\nkMVLIusmuofFyqsML9t46YMYSxWo+0w72/+mQXg6LAOd8L8dKfsclSGZ58gv\nuuhe77j9Iyk+TvuZi8zhHio+PkaQjiXSKyh2GoMPmUYoqJN3f3MYeoY1B5gL\n3FD+HNU1a5jqqB+PNVoOyGRI3gXh1LbQuHyXBPsVKESUFY7PqZFhU3Wbcavm\nX9Sn\r\n=Z8Xk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCqk1DTIiNcD/kgfOw10M3zIiPz2UYrx9I4RSSuqgvggIhAIoFQh48jZ19JoaTS/HoXPMqN7Hyi5CbxWDdVQVZio8M"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.97ef53d8.0_1582935507908_0.8255123151256927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YF0w+7YCyl7TS7WIJMXd6rBzzSRBBpx9Fw9FI5dboSriNcHyO2XXuXu2D6Ie5t8QcX/Vgkb92SQaXMI2dsiFEw==","shasum":"d6b7af32068560fd157222193e3b09ed3e425344","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmkCRA9TVsSAnZWagAAWQIQAJeBIA6kiCR+pyVl5Q4a\n1RljTXjuBxCWnyXXVhEIJTknKNLSB8yWNYwN8Pa1/0TIJ4T2/JUoxl5HXEZg\nTDsNSP1/5n/S0KTS4jef5Giz/uhiFtaU/2CLN+srEc5C7ULQslvBtBrsBBxR\noxifq0GJVMjfOYeBb4zWY0/kguy2e8Pd35hQwbNo+en9ImPelRi1e1Ox2SIt\no7Hej80YIeS9bTE2mYdV+5a8CgYFWPzXbDiWPshQVG4GyC4q0iuFJ/NOtxDC\nftPY3GcqM5tkVAQfzR0jA6XRzztuqXaz/bXN2RIrCRrE/wELKjjzk++Ul14u\nsx/xC5xWhGJG6CerjIMxlEGwE+6VMWQpExQPHYkZl13wiBQecBO/Id7hLi3k\nw8voIhsJKnxnzPGcikXH+7VltrtadxWSSrI9CbnnM0fO/sTkvxf/1WZN++UJ\nhps3/cycc2kBZcAXcGqKXso9+YZwxWSfG8jGUp+qWYGgPF9+4T3TmUMth0O2\nzm7yer+jzbfL7McJb6QfLAxOZZ9j9ycv2zbAEI5PVbROg9JWhWbhRYIeXRwc\nz+ltGvCIvN7h4pODj0vj2tIXqVBVfihrDDaDjNOUTr40w5nGAhBqLg8II4/X\n2iM9knaOWqfTS12MhfNR69hOlTPxbQsl15jYVe0UcyBGG+N8mm4nxNDt5V1T\nQtuP\r\n=/KkU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlN12xCwbjeYN1q2RSpQt4Id+txlFAeyGZ7uXsg38eoAiEA1GalvwGhUOpD/c5Am5DYL4wGpUAc10ec/qpLtAMpKCY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.24f5fa6e.0_1582938532318_0.8307747139713335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vurIY9nnmYI+YgEkvCgax/MromG8nJAnXZSDtcbgww+DftEq15MsvW/ci6v9knwqg5Kw/pgWvbOvpTLWAqBFug==","shasum":"4cbe2369908f20088f90c739a910a6cfa6d98037","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":55694,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXYCRA9TVsSAnZWagAAarUP/At3oJfzW+9vLejJ30sM\n72In1ng9b1v5k88uFCZql+hOyus2nEj8rixh0YAwDOPMQgTf9b6A0E9ZUfP/\n9Vfn2FWvp0tEhrLFhr9wAM4qiDHOPJmn7sU4bvXl2xYSOH9M3fx6Zub/WEOX\n8MVk+j7yIk7ZiLEjPJ4713T+bbJdFbOcE0UQi5vtjsYEFdJM0AV+CaNQdgQV\nfd1enEZDJaoAvwwauo7LkR6UaLVT8TrOudmM9A/TpebPvi+13MoOW/+DFwQL\nrFpuBG0kuVOt1uBBfHOGmmIo76/JzIzwUZH883qNMtuW6VjdX4YXS8VsoKcP\nLe0Etw/pMleaXY1QC+XxaWbEqslLrjIRbZ/+t2IBMBUBOdqTO2Nr9tU9p3ef\n7PmaTQdxjS1mL0gjfuC0n4v3WwPwdE/UPFBnyh9/AReNWITGdVwVKWTUw6Jl\nfBZJIe6EvGhJlqNBsjJI7XqiNvl6s8RqWqUbkoWdLhCRNe+6KtUm7BtQ5HoN\nf+xhHBRe7E7r8OqXwJXwLemmsAJn7wvk/Dj3Eh5wBbWWO+UIwpAbTh0eheM6\nY2h64OE/+2ZdiqBRLQmE/YAFdadVubIuU58bqx500MST8wtJkGULIx5qUw5/\nvpSSPmwMvf0Umuhuf1zl2sxjgXHfhYNpDIWltzDLEvtin6gpQNpDxVGnIawt\nSdWa\r\n=P94T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt7+cptdu7TUIczn2KCgYo33/CxJqMFrHtvKqh3+Rk8AIhAL7QVVturgnXYHP9RI2P7GgGTTgPkeakePnXhzPCl9YH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.960e214f.0_1582945752096_0.1865030053662835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-kIkvNG32CwOK4ViwPn/JcAoY0VxG3V986E+RiBCTVVaeVUdOBf+Il9Wn3F2oWcqHkwm0YSas4lDA0hir5QkfMw==","shasum":"dfa76024f37469db90769937a2f73963cd6aea31","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatOCRA9TVsSAnZWagAA3k4P/2E+ErS0kn1V9vJN1WPr\nhrWpb9yLxNuk4XZgBxiY2gr9aUB2Rd3aJMXPPHmRV2oyuzALfTU/Jp07AY0v\nidZmonQG/Un0w8jXyTk2auAWt2HGO4Ym5xq5GDxgu8gyzGVsJI8yKq4S4gPu\n+ideyl4nKdy2ZZQmy6sKizUgYOs0Oc64agLK/ZW2PQTFxFwU17SUOjE++1W5\nVVRrCoXWHhHOK2DPCgnyKvpXcOurtOopRX3IqjH3UDYzgOMtbdECt5TaVrJ7\nLw2JnMUToch2LpL3gUbkgJeut01iOHl0jIgdxzrq52S7q7Lj6WCTAM+fss+K\n4/2mRJ1ksaDKsOyKoJ/mxernzkqvNBZWS+EGpFEjVfSrwRHZ+BhN/CdiFM/t\nCZuIh8gE3WaB1r6aKCAb26gtAO6kPbLTq+S8JArbD2iBA3V+K3Pk5Kcj80JU\nmSOZM8s9qFS5Gi5ZTi/0Xjh8Ie2bunw6C88L4Woodv9Fr0nR0KGSBHXSv+VA\nc1i9EAvR50AEz5fWdB2aY6ddXt4u4O24edZ6fboCciLgvCxMq9dUhrOweg5T\nvfrPWaFyRmPaftwubIWFD5IPzjHTUFlfSHNSdXXmKKpdlm46KcywTvNKigsC\nCotimmtkogQ6oYI+NBBH36TrV9131coZl6DnJteDCPRSY63cLpB6zkfPRx6C\nyCl/\r\n=DZm1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrrnZ0Y4jZoo1dQ671sGF7l8a+lS9Deg/v8ShXoDDN5AiEA4rlXZ3/8Qgx0tSw5fto4RzxjxtW5GvK0bLRMTK2EcqI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.a2f046f5.0_1583197006550_0.09273243103065121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UxJsIQ8o9EmtelT/ekMsjUbuD6VYxzvlD7AlJKeKKNQR/FjrGabxqKnKZxdZ0n6Cr3kU0QD8zLz0VdezVIC+fQ==","shasum":"c5feaa6572871d7b9102bd6f553809038be96530","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLdCRA9TVsSAnZWagAAXLIP/jwyB9+LNfP1lWCLV98l\n3DpXJAF/fgO6mp3M2ul534hCfdMHheWsOb2tdVItLBnYJfByp8osx2GE0/hl\nyx7WpLgiCx0274kooSkjYeKA10KSVi3RZXOhyBEC1tfrUm2rPSuuU3Lf/N99\nxF6faS9e+WDyZaILqan5m4LP/2K0MLGqypt07bKwV7rn8PhOtj055YUe5Xv3\nIstt7BQoaR0jLz07TQn7ayQ9VjiHBCrRnhZ6x3URdUHxhxyLdagkqPWJzngw\n39FrwT96gcFRdRJ5rM3vYQVFeG2iQXWe76UGsvNqYbnWMkkmV7sjaG7c7JgQ\nBkXI3FR7zVhWew3UxpVJOdpvwoKcMJ70ZyCb2N9DKdverdfgzlb3cJ0O7sFh\nXWQnv05FkP1vwByoViX1IhMwRowKqOn48XwjP0xl2RnJabezyaJXJ2z3HIIr\nOteXkm0MYzDhBy0gi3xhxIjC10HY8hP64XleXX9U8ZsUVkQO/eXtauPxrk7m\nk/juNhaoYJ0XhM0bX5DWcxBKHi5RCIuD1p8AJlB7sWTNgAKlXQyzp3lQTTl8\nGnfbI5fu0CMC2OWN8J61skl8e3i2fTZ+47fMO2ahojd5JYiPdK7ENWRglOCA\nrjbuDpWPOWWvo1eXEkGnhrZ4rgwdTYR5rbeyzPYWej69KztU7qCZl70KphlA\nOJ00\r\n=7G+a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyGQbj0M3TDsnFNu8/k8v8htKySBY9TkbfDCmfvCeu3AIhAN7X1sROJeB/5pFRbXQ1rsxPXhspI+c2iNleQPHtL4CB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.024f371a.0_1583198940900_0.2132020119942004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7Zj4RDBPmHcTUbWKm+VkMekGRcqqhC2eKUefL2m32MjM7AnvnL8iira2KF1Y2QxDbPnoqnHpPgofiDNNn8IY7w==","shasum":"b9ed11473081e37722ad3e2d0ea2347c02ca47c7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1ECRA9TVsSAnZWagAAi3kP/0+MAVlegKz6YDacbYjU\nsPvMO15/mcX+BfLAqi+0uCQmKGy8qP+qw0A4MZqTCDqLbM4s7+oEtu1IMaa/\nzbkD61jwX7UAzNACd2GBZU2t74ilc7KjHBQvbpL1ux2oK9tBMALZtT1I2obc\nO81DlGrRAPQPKAWD6VbXPqQPltJIgCI4S4ZfGIVF2pkzxBnLmKe+Z1bg8HkY\n+Sr7FLdQgQHSDmQ8Cgjn5M9CIBxk2GUZviIxdaNmCc7xq+S4eTReOVzzgL1A\n8+L5VG06b1eklChb3eeHNE/pv1GxAFzrH9wvztQpxnCx8vsovtMH0PwPDHAV\nMjf9B1JyiuGeYNt7xMknWCh6wjsgLP5eFObpkeeUMlV4CK6j/S0OX8kR20ch\n5prd6ctqX1tngO7UbCgimVB8fzIkqn2nWX/Xi2TkOpWE27MV2BTstE5qzS/t\nmS6V2WbYfJOB34Pro34ze66LN9yQR+QCUVteTQuLGa3xv1yOZKCoQ8gbRn7J\nT/nGKSmPZ9+wDQnT4LCTK+LwQz+bKUBDwQyLIFIvp7ioveBaiigS7JW6ZDc6\nhw97jGSCR0QXT8etIDpBLqeCJGZryNi6d48vZzJw75wsLAk7keWRIGxEpvmy\n/Fr//YdLHrnSp7eAOhOeZj0lfzHVoMhDUtA4L8cGCDXpf3cteWEaDirYCQyx\nHVfP\r\n=60O2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEP66bxTB9EM/U90JiyUXJCkC1iktf+HRkkjSGguFbugIhAIgARGNQKVaCh3XZL2YAWp7/NfK9/kMFwwR6Q3FFnzZ1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.2f164110.0_1583271236599_0.48086652050072876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bsIZJ59xGIlQN2TRcdttewnQTn8PXg10L+z+e3ctB7cMgbN/hTXNlPfMSiEje+7WbsHLEyqayNq53Io91kkH8w==","shasum":"0a63f66b89beef0e212642cf80fd2b5d93004646","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIMCRA9TVsSAnZWagAAmQQP/RTF6+eB2WBWbB3EPgyN\nPGB7O6d1/hO4xn427zv129FyzSewQYu+j6plEaqYZRX8wKYQibQPNcGNDW5F\nzcdif3jYBMiXZSNc1CYhEvd620VK9cYHNg66I3X4wQtQzNgDMa7J2Dj/aAII\npeoZkbF5HTwu58NMz/jsidwXVaTGXJ7RHgPuLxt+eGLIZW9yQ1YgxDjeCsXo\n8fwcmR0M3QReEDFuuOrs7DJnsw/xLNl+zoQK4/WRt+Mj2UCXMjLaw5s0JKki\nYUhXm2Zp6T5YSVfO3FQIhBjuFPSG4QKQc305oInyUbiiV3hnhXlKkSvUWeqZ\nPtiwDGM73njnz50TBrgRsIRL6STpWXRHUF6SfjFSmQ3t9ieTI1a9irqNbiC+\nl9nN+p0PF4DkIzo98tktJwmd92kwwn8/lW1nNw/HXr6lEkqDkNKmXbWUyyPt\n4KA8DdPo7h1GQJLvOEcFtKycuZVqkl/tw8Gx31EuRFVjx+irK3eMrT1wZqP7\nHnKy4o1UElP3HgoAAv/gBB9gYWb7Vx4aTFlVB4hJ1C0TwJyKEgog1BHY3+fo\nVB3Vvq5HK9DNIwzfk+fg2dYiDcLZSRS4HhAykphJwfegCeLtE69JKHdJafks\nXWM1wermOSYufAPwHdQEYIfJkKu1ZeBSIuite0yo22T5f9VC1s01XoF+0CsE\nMrew\r\n=FlT4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq76YhzJHafT6yfXlakH5udZOizZnRClDjDZr1CnCiRwIgf4fg5PqQXltoNPJl108HLNxZP8Mi14nWCPEov3I2siM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.edd465cd.0_1583280651615_0.07912870055725785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BhBvGL1pKyOiCGnDTpVP0sH6GprLzDCD+HWuhQJTHYydoPAQN+QVpaAOT06v5zu7LgKTTv+cPd1xirp5iWDWPQ==","shasum":"80ce9148f7e83bd9089b538b3681c18154a0205a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1GCRA9TVsSAnZWagAA/TEQAIH6xDgyfCJpgGIgp40b\n7u+H6klZEGlCkkUulcF+4wxR1s3irE1EPNBVoZoMV8JMcCmAK/ejHtYkYDMT\nCzaWfplkAwfEAgW18smK7+sDHY+xAkLookkNzYPPXkVMNzWxw2VwHSC8+92n\nCvqwDI6ohZKVK5H2357hY3PeJ1AfEhnpwVNAZxJLnNO4zIAaR14OGbZdxadr\nqzIeWNEWt75XFSn+p07lMQ/7NG1Z9kONVaA85g2My5QDvhLuSIcLOtkVjuD8\nS/ZN4h9XZx6ZU5rvupH30OynxCa5Tjb0fK5jyvPFlmdIdq+7xlY/OsxigiQ0\nYVuGeKS3tEcnLEGIRnp0qhl4ekKYFom1wJWfuybH+8hKeIWCjrGDfiTd0wxW\n9j4r6fV9mgtIce7l6Hs8Vpa6VyB5xleNDA8WHswWzdO3I2YHmE+9rxLVCuU3\nCrVfAV9QGK/7Yk84lJBG2MT6VIM+38KMn6LPuDNBeKVD4WkxdazfRsbqOx2Y\nMf9+A8g5zxPCK9/tHtjPNOWHSmmseWzYEEsrp9taK5OYReZX6bG98KDUlIVq\nF0wfJ9BZAzZZVfNZDqRekUfSG3RHabpiXufJlRJJAqrAQg3eeLLriLDcKPLt\nQ+ZFp2dg4bhp6n3VAxllmOs0nE5XgKYPfe9yPO/3M1UD9TAo44S/AHgz48WE\nk8Pg\r\n=enoD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDcqYdYD2uVuCIvv6UmsxsuD+CdEPZGFWvod1FTHs59oAiBdF+z5BV5LhK32HD/2/snNuyG0Fd6TzqgPZMgNfqds2w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.2b02d017.0_1583353158355_0.9757357097354118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WQaK3BphspivumWLQn6yHVsQdbT6190Ek06cqIlPwtxJsSVBiJ6dllTGVbyGRDqFQogo58UNvOdCt0AggYpIgw==","shasum":"69e6f9df9ea5b361a35677305631e453481a32fd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFKCRA9TVsSAnZWagAANFAP/jjJFFZklJj3g/WYQvgg\n0nTxw8Z3+yU3O71Mp3WZHE7OAWAohgkcHplwzfgA7b2qUhVCL28hKV/3cwYg\nie4uSiY4Dc7EqTWQbdQtCNwVshJ3etk4iMf0DIwgLXTPouzckZLy4aKWkh6u\nfdMuSa2Aa9Fjz3CXEE2igNMRUdeUuaByWcRVIdnzuTKzIVxaTV3EMip4H7f6\nkFk6KYgJtf4Aatrjw++l25ltCYMp1uLWh19uuMGyQpPRWZKpaZf7AiyDc6/F\ni02nde/2EoV/Vlse3AD0yTrqP2/KlnUxHkjoIQi4fO3x6zTcCpKnl5EzWAoD\nJgq1Se5to2qoai8q4p5OpteZjZE4StEHXKqA0Y2hDBRF7QVUPkaU7RGyZX07\nho7moT+HG5r5kQXhf3RsaE5/by1M6z3XA0/e4W10iAsF1yYYlZLA6M5iIC/e\n/MfliI698cjwmhKfJb3VlNjNoVu/iREGTWwmNyTCuRiz2ethjzKwK0pInKH5\n0v61CgXJdqpWwsK66YzHBqyGgvwLx+WKT+zh4splBt2asjwXNqdSZ9xVG3Rz\nL259cSdTLRq4nPaMByVUY5l9nFYBx2L90h8+i5Ayc0sPbbYj7xAEOLyxIsT3\nRqQLKvcUboDwtRCnMWa1h4+03vJGv1240neqbBFaZWTAcBpmGKxY1F60byWI\nU4DV\r\n=F8vj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHYa0nbvHe1rixzpFc7WozBXJ6eHKGU7uyjbx5JWMmLAIgRScipLVMd2HQDTJhXAXm75ZMGX5i9StPy6Vh63l1yoA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.cbdfe453.0_1583358281699_0.6604805216948355"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0CdgSjIfLEz73WGAT5MkQkS76Jmh5z2b3PPBhG7akUUKoiWmVGJGxZVuQ0aW2CYUurBDmdeImGXYLeaoPDnuIA==","shasum":"51225d501a1bf3500aee7fd45ced46f25e8cf5ea","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRuCRA9TVsSAnZWagAA8foP/0N0zuIbnn1tSDTSDhwo\n3og3OAohgIVaF6qwC7vRv0re4o1DztHGn01Z73EuJK/k2IhrI4fu4HPlrkkG\nKvc2FoYh+adbwZaJE3IZ8YRsxXElLtYVQhCZjWeTsLKYEesKmtiF2U8WVtVd\n0zbN5ZuidgSimraB6YySuLusN61j9xNqausKxsr7WFMtqoiwK0GIj7n6Yo4K\nCcgmIcWgwAJF74oO3jGayX4VYR4AAq+ANTqlG5jpMcG7a6UWyB31cgaBBCRn\nPw2yKf+7Tu9bLB6Vgagw9cyHuyVosWAgLbDxSRxAltRr9M/ALQl+mCqLwujn\nxk5gDEFE1x0Zy6gsoR76XNgKdHfAtIo28479zZewBk9pl9JHqWUuSas4GO4o\nWW6r9IqjwGwzr/O5hwd+jC7xRTafeIuI3vaRDMX4Nf30BuAFxuWWPjHtbIjm\naHSLVZ5OSFOOVR7egsfq95qen6knOl/IQEGcL0FeLUDd7QFp4a0jN3UoCaWy\nPlmIYF1Odr5CN8Rs8vC4WO0LxPcWfB1wstmNDtIhfOKz3VtQ8pRZTUst2DK0\neTwH8wqKDc9IwzgD5UO+U2eCawPZ0P/iVxiAzm1TH0+bnYVy5+o6aG6LCGBd\nHplEW3AbukvYqi1EmgNBcQ+/1G2tND0UdqjIIXl3WfFvL9YDiWSDsndbNc7+\nlmxo\r\n=9ydq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGX8zLl4+/99y97GjLz1MW1tk1l/xOcIThgXmLSm3SMyAiAK71VAdHlngn1wXxDT2oKI9TzHbEOiw9ZSKt9NgaaNXA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.02aa8a98.0_1583535214225_0.7569333925092561"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-jaWdUvzAY1HUeop735hytRkfzYqaxB+sdTVoX6P0pf8xs9ZBcAXKEzrLlHM1+T12//jm0OxOVl51NdTqz04dVQ==","shasum":"96790b1203ad24f0cc356f8f2fd6d5920093079a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8zCRA9TVsSAnZWagAALSIP/1kOZ+rQMft0pNfbY4Ti\nS7bkzw+Mo2t8BuPJl2RVC7g/JFwQqxVXMOzn//T1eDDGghpyxpC47mP6J9Ru\nWTQgOV1Acm4+N5tnJ2rKv8HypAxgGtcl6rbPo07z6RDEjdpD+FmmYTY6Wbvq\nHovaV3SXKY08w0hRV32JHQG7VvzUBRkULju4YBYcO1hIhh9nlUnMBLVFkunz\n1V3ATM2o3ZXBenA6ZqYBRmylE4SxSaDzma6NQVHzRSAMRlAi9dZeexeTXtZW\nl+TAvLcjtPsAlIdGPZsxvjHGxmuszXgla36H6+OKlwNjW5hvOXxaRnFZG1MI\nckJzVkI8raAeuBHbvle22aHJAjGAZulR3Pcl0+jJOiIbC43+69kLErZvVGz9\nHUwdbwU0NDYe3GCdH8tWk5UM+adn8EXQwl05soQ4MAlcSjzCk0FoEiUAMB4m\nvpRCz3CY9nmnA/rUwOpuGjVO3dYG3/wj3tA+luzSWE0bQdo4ier06vMjeeo+\nJWImdeiYQy0U+/rNU1P1p6R4UklWBby4tbae0YYg0gS9q3orb06H0ZQbgWQa\n4sNeDnhoM/BTjfLcN69AstvgZxfhh3msF/2U4wMSCmZS7WaWyrRWDmr5YNnN\nIWlVNAadP8a6VKiGmoZTZB3xlByQxjZkicmsyq5S8j7A+BUvysROnFOF+HpY\n+8TR\r\n=YvNM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOXPcjcl1pXMFxXwxR1OWepEtujXvfCaAe+8G7JGWXEAIgdzLtad377KUwNeY+21X2JgP+Ybb/C04M1vN8KRtI4sg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.7cd5aad6.0_1583796018975_0.14772241901795313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-n4sQik5zL05usxMP0iQ6pKge37qpkZ2PLKOJzMHEfEo62fRbglqs3Lf3AXO+H9AZ8Cajq5YG77CuyMClOxOrTA==","shasum":"a92c6ae807f663e435a5bea5f82eaa8882e38ef3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHXCRA9TVsSAnZWagAAH3wP/39tqJJPwSJNlc46Y7C7\nF9KW8BMyO6WztoIcLT3p5L9t6jwJozUqyelXoO/D0VKlgRZ6/ItpOVEf7jeD\nRTGp1F5NTGmqi7g5w3XIjBA/DlRsZF173TRw7+TSLsP5izZXjPKqIlyRauYO\njKba1sxpukUKR6Vx09vZAiyuzZa0r1mPYo0c2LG1gM/mn+1AQCTdZQCNWp3J\nncEHxsFMrJZIakTrKZTXNQzOPDaEtPef6CAIck2QN+shFD5bK+gUB7VVex+G\neZzO0woCoKRioep6nE0Esr5AdAci4zbYSPEMg5E4P87DYt5Flgs4lrQJ8FAF\nPRhRaE4/lyRRA941WtNcj0kPBbHFd7im8fdJalGfGANrLMaYiZGkBVQrgc+j\nwHxyWadhqd+QUJfnY+YhuCs9vY3peapFyE8iCEtRH7k7q0n9kdtk29qLYNxu\nXmq7FlBDSdlnC2XKuQ5CwsYCBdAUcFOuyUtNheLMuQGRWNIxOdntHWAOY98p\nZrVrsrkRAi7S9unAKYs7+xfzUZmEZVZPWPavr3CAmaQjycgntrLOIiz926be\nUrb29LszoPmHDi6UfwNO/X+dcZzbCThSK2px2YtKreuqZ5QoC1okE6FPQcub\nXflq+SxGUKfQXizl1+HwSdj9MoZwFNfQ0dpQEvL5/PWZ4H/mRI/SzCq9X8wD\nuwEH\r\n=/B7t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE68WO8zYJIdiYEpP/H1KGyiFiTqFNT7oWCq5i6XnKoAAiEA65w15NFf9vBb4Gk/IjsEBt5hgSt5NfZcW8yn0IfRB2I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.3a79dfa6.0_1583808982926_0.6057922630445942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XtqQibuHcIVSWAOztOpU2UiZrNOTGid/EYE/8IvlsBV47E0Q0huQDDP7+3x7cZiwGRybPa6/vY1jSnGWVHuz+Q==","shasum":"985cc538be927058a275bd91284227b4dc1761cf","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLGCRA9TVsSAnZWagAA3CsQAKBiSQVKNbM6OE7Y3Ekm\nS9BXGyDiegaw/hJ3XthGL0Kw2iOUiQeKQt/zn3BgqfmawUX7cpomH9F35UhC\n+j6feOPQASlfLju0lkyCfVhgrIteGGLtd313jSA/rFmv2DqEJj1l81MlMeoa\n2wL3xW3bf+glX2ojomH99hSSdXVeWmqehK2VhGPC9DEHsOCb/Yqku3C+aHbk\nhbhJ7I+dUFRfcsLC9zOXJbam9SpOWFUD76P4QBz2KtJe3PZ06fSwPvW34LJe\npRuhKRdcW+a1vuWbQsv8M/Fqse6nlgr5VDCHlDymGWet1cCrnvV7yDGGgRWz\ntiff6TDtacuRbhKL5ocbCku8GjR9GF7PWBuvfIm8W2ASyBPGJrIp8Vp5aBMl\ny1zFlWlPfJYVzfaLd3uutIxgsdt+uOsdqmpCcd2IvlHVyQEH4izbaR0xUwVH\nouV2LJEOBlKENYRr/Vfm2B58MvMfDSvekC5EyVJy9R7/qovHSbWOcFUnvX8K\nDxxMj1uyfHg3NF9kEikhILxfaZLbrXu1DfvioKmX1/P2ZvyaLjm/gDZ/8SRS\nrXosxuq/rVH/D6NqSpqZgvrhG/wldLanTJPnstJ1g85UNSev2JsW9M7ZnyLv\ngUuI3Ns27fuN2Bc0BWw1jd9V7CaBubAxJj7Kt8xR31tHVz1WSv0R+tV2rsmP\nOyjM\r\n=q1EZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9VuMO0qDRq9KIvV0Mmr5i+ZmZcodeAuGBmTMcnJh8qAiBjTVpbjVSwG9UH2l9BxeBCzBkDiceI+BZPbI2T+0t50g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.22e0f5c9.0_1583809221824_0.7573197367832181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-OOHNEZvdsxGhWWKFt/hoOY7bUz8VEDq4xo4bcciNdovpwbVCW2geyCFiyf9rpxOX1X6cWXlTWhEBpHhPp0+c3g==","shasum":"02668d5fa737a0487eb65d92d49141e804423314","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8JCRA9TVsSAnZWagAAr5EQAJJpEiaT0j5eLUY3JOYZ\npEdy5P76U+OzYv5tuYDNBPTPmHiekUA2RzQjlU/xlsBaaN7yopNxGm99BePn\nYXMVrj5HjxIss4kezzzRhgU4K9JnAHmhyHFYbc+r9uKIOgDz/c7X3j1KZamy\nyf7DdlanPa53PNMYCny+TsYCHOFFs4xvetLa/z/1KSuGtLvPkeuRToO6PmX+\nXNv1Zb+RCFBoTLpKU34UWKfnXyzFI1t550rW7PwF7bJF7EcAa+aWvlxCfqzG\nzmwZ9V3QVB2CkBnbiQsoFp6a8l4e714U7wQTBg8uMymMEL14/FBWm6giz1Ay\nSjaKf0tvA9Dti++9NWDMxbs9nKUDyTLTG7N6Znnv+sOGPFVuWCDjxtLnwvPR\ntvwP77pz1GwI63xk5gOtO1+2cQKgbOPd1gG8tkSSttYE5HTe+7sL+kT6aiud\nuGttdHAjoS24flct227s4OzbTfJ9CX1xWFLqVAVmYZKLUU5qC3Dt039PMgY+\npLMKz8UCr39iADHNScMskwa3EFpnwf9o5ncP9aYp401arsd2wd2+tWBGiIg7\nXvQaAF3JLZyF1xY8QXVHgxVYdXxF8CW1vKpuxEFk23xP17eAHpQwvcM/XXHR\nDwKOKoMPubz/7oBPWfe8bTXoJZYlYjARf2YmCiPuMv6o5cAiAGptTER7odIj\n3V8r\r\n=j9lo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8/zUsw2Je80k7lxSMg4+UJoanXTlvwbjTsoATyhQLWAiAk0efXaeKvt6ypIc0J3IQ6MJBhmLiIUimT6YCbXCrNZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.f23a1d1b.0_1583873800601_0.45067327042294325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XQK/4PdUW6Ka5tjybeGVubA0+ZZxipLjYwfCCYNFrvDF4BZVtbo4uRUuxB96xTQ4GDUMwRjfxZctKWJyz7pROw==","shasum":"9be31233db0b39f78b1ca96ff383a94d8d02a2af","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANNCRA9TVsSAnZWagAA+JoP/i3UlQJTZobruzJbElGc\n0A7dNds9CIkQhG0S6/5GhuNcQIWp18pJ+bRYDpf6tjl63tYtYJy1mEfqkF5z\nnw//1NTfBMTjhcH0kfuH0JyQKBsQ3SAXaiueSJVogC+iwEzsxmwBUL/vBofl\nCFbRaImS7+CUnHHzurX+mzUQ95qCchNteVVkudAP+rh1pU0dogIo56sdS8fP\nMccC1GUNYYIph4Yqvew3nwf/6xb0RNf+JKpYAeiZsU/iOmjBWFHlfryva/U0\nTUp9lP4vXF0CpHgLFxZM1yxmGLL4oQmeyuAL2UwJ9+R538y6mKsnInp+q9dg\nki2d05CIeIynvO4Zq5EMtqU/F1mAEZMaCexVGFEKn6/yc5XoIjNXhAmU3XxK\n68U9qK+8ABhiaNKy9f6LHLHjPyyE2hXM5fu2QZjrRQi2qUFbvKBcM/qgurSg\nPcfplw5r7u1A2BrieGdQO9sd3O+BYvUPGuf2vI0TVwhso9I17YxlC1cqUDk9\nlXoKUo5PbI623p6JxE1D8OytPHvXq3H71dtTYPPsPfEv2Rbc/xZGYf9SrMks\nPF0CXVFa2ae9TiATxEU40Jiq+DUR7UqQwPUIxAhfJSRDBTZ6Vmas3hRWWbbg\ndmpZsh9k3bbaI8v6FZy94eCNOI1v7oi1W3AtZNHceO9KRZIz8hgFT56Pgpwb\nSIx5\r\n=4c5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHylFVMSPH6aVXH92C1Wh47k3/5sKkm16Jhv8wtj3ycTAiEAy7n2QdeLYM/RGAKShkwKIxvMfl2oxy1lNvxWFHziEVQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.34b2d69a.0_1583874893045_0.6408744417645875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rkmkxBSjW6mIuhJzEbm6ID23eR/HIm9HJvR4Nx7QtsttZZ2xAHCLyPKymIJQcoOjLFXRX7PufhuqEXoePFMIxQ==","shasum":"1c3fb5b948c90333c78443c001f21ae4b5eb9e60","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5yCRA9TVsSAnZWagAATDcP/2iUpEQh8CtQkQ7KSznM\nO2c6BZAJ8MYjEz+Sl8GB3twJqNOQuZzziBAWvPF1lpz78UlyLthHO5ACXcTd\ncFFwdjox0My5LEUjQT26+4h7xsoVrkNLSNGp1PcB1ntCnRQZg+plCFcCKqoS\npc+6jfCkmC5n+9qOby2X7+zQ0sFdcjqwRSZX/t7lrMQAQuKoAKFWOjLGj2TA\n7UA/asxNWaw9SRHpU1u8oTO52ZsjfueMhP68jBkGenno436XAQJTwOEytY/Q\nfti1NS+e6ZFL+vS1jMBRUUH+0jeATQ1TihlZkYe1WjZnxx11OrgB44iSSSdm\ngvtUJFB15s+GO8zYI88RVMHcS40wpp7R6GOAODRg+hRED2EWAxRBOHNNVXVj\nW6YCMF3T6VmCox+12h8MfJRv+9lCNLrduqXislFd3MTCtKsKRXOwdj64wSV5\nXXqQypGJ1Bxd/rRhb0JXkyHNfvilyc/AJTVTRKlUJvQmwhKRM/BhRsFVtPaM\nfRKWfVdLZ1xsSrRBRwjC87xoLOumPsLwk8FjBPtQ9CY4HZKMwTyqTEzKjAix\ng0lxBRXGxJTdATUwmWcoKxj8pslXvNVn0BdL50GFyr86Ra7h/Qu4/h9uDfQF\nq2reJ6ZoYHB5Zta7Nh6RhyE13TjOmao4bUi9ejfOg8F/kQWkD7fKNXylX+6/\ncRlP\r\n=y071\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx1+OPoVW0T0+zCHBhgEcKMNfCoR292LCStMuvZS+VeAIgMAWXBJPF9aC1AInbJG+JZ7n+QXDNscUCLbGJ37Dz/hA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.dc04abe1.0_1583877745956_0.7306489924659478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GWAyEsPxniwXoGSraZ4P+QrIZKOhlqeZ4MEj6566unD6/643o4QnEcULjzzwvI0tsrRtfhTAyc1X/FsvgepL1g==","shasum":"64f4f8b3f915ae65b79704829ffa580723260ea3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDI1CRA9TVsSAnZWagAA0P0QAKOiKo+prc7Y4S+luCc/\nWZtfG/Hq7I5xfZ2n7Iuq98AfVwhqmZDesStboNpWWyahoEVH6yDrphPHZeNL\n8ZVOWuNqqBRjGORAxSbLPtAlpV8zuL1kdgBIr0unrYmM3vdf9Mti/RTZC1bm\n/B+yvgmNodb47k/3O1gaPIjoktHxnUmp5c4/IXae1Nd3Vru4D0K7SfETm5yu\nlaty8PC75eVDiNIwHtGkYL3eRpoQFrgtDCIw7aY5QRiqT6CqJ3H0ee0gtGnQ\nAW2JU+QSrAqqzKyZJfoV8FwnwpXxj4P34s0vpvmGDmioQ5ovFbzlc189VdRs\n6yb9/FVGIvTWlqmjGi8/NH7FKK/GN+nf/W2IkfGZ7iqK0jtigpopidB5W9s0\nhmqcJo1EEzLRjSnlqnDsiwec0ptqXeBbQEEB3AYmhTSe86L7Tml4yHbBL6G9\ntBwsnfE4h0wqvIl0rjnyPtLCCgP027sIjG1NIA+6RIl4J7za3WzQvOY3Md7L\n0heco5nLsli0U3NTBfvkViAzG1cOPKYB0f2GUUbNK/ECV01meQLY5KumbZmR\nDE0eUEVboZFcE7cLHvbWShiFaFdd2jDFbrM342yrhwZlFgvdVw7WPdDo2h1c\nUtLDHObZEolw5aQsy5Rxq6J/8c9IVsH2LDaAtDJqbq+jRQoMV0iD0eYvDfYx\nWq7S\r\n=XuOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEohzntnKk1JQms0NKzDo3n6fbYg/9xN2SSSw/HqrAUtAiAx/s8FMjr/SdVaOjWePI2giuF6sSOG1xWoNUbqmramig=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.04ccbc88.0_1583886901274_0.7956757690131175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JicK3zTAHvX9Qmgx3Ipd+uJQnJ1dZILuTu7i9amBWZfDalofXzHnN6LQQM5GpAdahV4363MOfKtg/j1pRIVRjw==","shasum":"0688fae193139156557f2e523de537635d9f0b64","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXHCRA9TVsSAnZWagAA+ekP/j1B2RD75ivV3zouGzPB\n4z7sDI7tp0e9eDQ4nfdoo0u/uIAM7WIBd9wMNHSp0Y2/OAQ5kZ2S3l+Md6C9\n7nx4/9/xIFMZ5krXPqbGGBQGcxYYvUnG712fH2t00TTrFZP2/svptVw1NmWB\n4gtOy27vDl2Z20WQDhDy4Owj1qf1OO/ZZRYbIupgycMHyh1BNraD3BjE8jbr\ngKZAE4smjh7+rT1NlJT75U0WNx+JJjtRoThhwgOQr86kZM6hrEW7vYiKFFq3\n8pTDTdwgVjE2IzdNx8mirEztLM0mbI1yLNDYRy+uJkFD4mt8KM1LH4X3u4BU\n1X7BJXdUBdhRFLeXBX121Qa4741rulQ+GBpMdg1V/OjIpuR1EG+rOHSsH9G8\nNgUi8VWvPWwkZNvFyJ2rwx+sHL03ZIBCthZQd2ct1o1clMEEucKpD5aJQvcO\nLUZ5YhN/wslZA9rIVrW130/96abHJ0HJfqtk1kclqTLZ8rHigpGYMIUlO5VS\noEhpqBxDMhhoJ5NuUF5Mz9HK1uEEjgYdV+lInKwNtMUPzlW4cE36Bf4paxI9\ncn614irzVgxoquDsbQXcWQVcaa/WU8l6x7g/ZTbg/GhcLqg3nXF8PBZlJakt\npC2S9kuF7Eqdh35nOnKzEG/8eeb4yihZ3ah4xX2A5a/Q4KTFaiDFTtlWQEYR\n8lra\r\n=2rxm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIaA4PkkH4Qe8iurGwgrFV68UIK6O0mdPMQZe2apSyhAiEAncoPb5MRMkW5oI/fAbhTaMlk+8O6LHmpXeLfcFffcRY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.55338c25.0_1583908295173_0.6936280872082403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-iOn2WxLSuGMWl+6LGSbNTEl79LxUi/1maD/jiUqhRRI8nMp2Y/Dwv760kaW0PXQlICl3mn7s4esUEVOM7XJTNA==","shasum":"a623e83fc3f9d9deca662cf0af07d620b522d2e8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfoCRA9TVsSAnZWagAAOukQAIJrnMQxr4nFPt5ggxyL\nMX8HrxoxrIJCY/zL+KzOynzHxixsnz6vdAjPwVSB28EQ6OiMHGLm2FbK/TMQ\nnnY6fB+bDM+m0Z4DpcWZD+SnyactpsC3EXCJw6rFXVQ2e3wr/rkQ6eRE5I1m\n38HLyAyhTlCXKEXVKN2oMtHEsxXakuG2lttddRVwY29CeLfr1cmVPsYsL5CY\nJgdYMBLVSqb8uHE/inaBkTS61fEpKEH4Vuzs17IsiqmpZJqbgW+dL8rjblos\nZYc8BcdpQWI7PBQDBTlIINtVpUZGmfWBJ7SGa9ag8ktACimpGlAB7pvfVUsH\nx1QgVSqa4Jzti60tfZ7XJvd7uxHyVR84rBb/Ccp8c8mw+/2XGyMbqtlb6SPc\nxzm4/nrItN4mGWkCPgc/fWYeTT92OSg1E9Q5NLASUlgX7W2W8al8xBAH+Xjm\nV2RIgRA8cMC+tQlxwTEraajqoR6oaBGmuzqqKGE6jEqj8KwMSzUd29kzjMOq\njK1kSB+0WbbDZT6HTn73RPE+yJZ0FIGQC1JqTtPFzDx5jHKd6fahFiJ5ZMN/\nAINkzltZdVduJ6tvDtt/GVEtJw8TZFQ/9iXWajMQXvYFGeO7lgqDdzsPk24p\nwqYJqCQmabrU80kxjrkogTUsP818ptiIpakADnhtNgcfLWbA4lzt7ku4RYLb\n54Hp\r\n=OdnF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAgp3w0kh4B0q0x0I+SXmV8Q2u6cj4kvCPO1eizTN+E3AiAWe/0mQjSbH0sB/isx2In/6ihLzGY9mecAq6MmqG1r9Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.b7e388f3.0_1583957991884_0.5490716633562658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-A3SThz9rktZEzRp+wNArX6ngRpZnaifdwSgT48czqleFiCqmMU6Ctnrumj8aqT2DhfF9obGCkHW3aHoQtLyDcA==","shasum":"06a7e4f6825cf8093528d4288b668feab6fa1292","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjiCRA9TVsSAnZWagAAFr4P/iSvGItIOMusbb+zZRnq\nXkJPFUbug18T4q3tjTul25l7ToDQOXD2AZEwn/OgvbBmTfv+yHuscywplKob\n5zoQ2SQz3Dp9bHhqPemZEsuiS4IYaUrQKBa7GiXzowZr5NRqPjQxEzu7mC5f\n9PV1AtpNwv1ErYUoUS5phJ2jL/vDljLcVTqQN27sHbLZ8YI486B/85TJD91m\neOhImxQJsyPkrFvuAYMZQ/ZvxM7oZzz7RetawUBuJ90uhofbePcPqNA53rdI\ndO9vDlapSskJ3DCnNCbG2qbbAxs7UCdcTf4H8waqZo7Wy3JIU5dCw9TYPuKF\na1e2HikeHLPwApkdW7C25wdqXhqlrc2jE62xa2b5rMqr5KmM7byg7Rk6NNF4\nCLysDqFGWGzDBmhNSzkRbKUAHePpr+5Dtdgc9WUdWmMLzSiWI3XubJ7gbfB4\n+vjEh6vgi7LZqHPBmSzdDuvxP9Kn02dcORc5GoHINve+qCr+inGNDk2wQaIR\nkPvqXtdzxy9WedZ+tcTPCRvh+NDuD/L8pvpnXGbCgYhM6IX2m9uaLvVHC+C0\nbHNsCR+F+Ax8Wq+iHls9y+cNxtUUhwh9Majn+qfqSfHCwbHOsA18jpsrpFpD\niPd+io81qrNoG/yInxc6Xk/c+dhY09f5ycmwg0TCgBkHuJDUlVx9YiqiRzQQ\nur7M\r\n=To9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLBBjcisxzL3RJUX8+e5W89b73Cy8+IdpYPFhrBY7y0AiBdJsPackolyEznPj3Meye08Y2WBNJdqWBPDZZehJEeMA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.b3211481.0_1583958242530_0.2709964829434135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aEpR/p1KiGl9IajeEI+WRcTokBFgnWhlnP6IV80l/O5Q9R74HfzEg6xOv3KUaowdDG/n1N1PfgIkRUVIwWNCBg==","shasum":"191f6f5dc4fe79fd3edc51f9f3b51f1513e4868d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV33CRA9TVsSAnZWagAAnLwP/227Y4/ogIxN31j4DBns\nkv+6bti7HqTqFpzGWtJjKkW5LnvA5Pyq4ULr9ProLJvcyEIWBjwsjr20Flx4\nTet/tNBSbdatkj7OXvCUcaygS8ukpiRwwuZu9gKPOcGCWGbCNXuUVTAi4bPi\nSkQvYUjJoYqlE4nVmHLpwCSi5mIcdy+IhVVAIllmL8G5FY3gpPOgcdIAEzTa\nvpbsCCi8RIC5HO4n6uO63L/zxjRAp/BhfQVQCh1LM2BaaXfqseZ+kJ9pYBua\n5F4+C7PCIPzri6OAqqdF/wSHUv5LAn4RDnQyUHecWDuY+5aIn34x+26cWen5\nT/5/17DbALnOiEYPq5y/toHaT8mYQbr1xWn8PLRJhonYu0o964IouMbRce8T\nNoXgW7KVeC/aJw+oiDGgsZ0gKPoMsiNQVXIiWwBPJovF8IVvG9wxsAZSlI6e\nwCcUrIny0hR6zyIX4dTXHexeBpsmdfGGtfnaTrAwoZjVF3dI0wzQWXU+wJZ7\nzsj0TVdWM55FEYfOGxiM7zVbi24vt0MiGO1tAC77RCp+Wnz+q+fHyfURk06T\nA5XINDuT2SzFvntX4D6Yl8USzw439HIu39iQisxidE0RaXNPKhgAdUcVdyJj\nM72+d1sng+V1C6VXv4+jcgxPNEhg1xqoRG7jOJQR2iIo80Wq06MmeMxXMvdR\nXovp\r\n=rOga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXRCSV2QcsSNvBVxbh5AZMC58C2J+hsIjARqLDWD8fjQIgdkAzj8Tgz8w7SRbekhgfG0JGV3nOgh/zHJP0OFmjpz0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.0b5c7f23.0_1583963638596_0.8211476924297876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gaONytQC4GBSuseWx8nQqX1Fp/6Ir8ft53+6CEn0AleVQ56Xiqiyb6sREYwSPy0QZ1/+IVqyvA2PCxVLHe2P+Q==","shasum":"f923a38f376e33c32bb9302a18ca10a3a1d0fd6a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbfCRA9TVsSAnZWagAAZZQP/2APFhBD11x1SkhTtF1E\nvT/fuAi9Xv/8Qp/C6QBrsHSm5rCPvsHBWYqbZvm83Jm7UhymSQ/lA+fsUcz3\nM4Gi1sXq8pjZi5gmOjo5VnNPl4oTRH7RSdf1eDvjNMKyuR6nMiiR8JUzcr9w\n/yfpkQaThbgEN4X+umEz5Bd2Daxdnxsyi+s172TPkZ4z35DMIli5V5gGNzU/\niPAR+z2fPeUdF8ZaNd5xu7hm3n2Mg98CoFPxTBnrGkD4xu1lQH/us/qyVCDo\n1gOu6N9OpXSsocpNCsokLWnDwFj09KcEr7mABMFz9gEmmrn3BHqiaSGBM64o\nADz2xprzvzVbsCLjTgvv0P93/AfvUD2vw/J5IhyzsEJePO+1ttQyx5UNLaXu\nkqiY7KvDnlkcfx3PSjOX1l2CjYRe4iqTaNWUR8A55QZHel1fupYglfYSdGMp\nC9QlOmbTyO0oOaUr6UTyxvEE6g6a0dSK9MZJajArNnEWYy8wGVIAOby339IU\nhoJ/D0yWhh9Xk7KWBxICC4E4h78Bfi2yrU+vLCoT4G0SLbJvnub7WDB+VBaz\nafw2OUwl8XvgFML+2eTBMOD2sQNcJyC5LjbrtJRNlOlNOMgoc8P2sDZ65bNy\nPM1C8JEiysoYLeYqnNPgY+MNPu7JMzFUuoxDoBveGYxEgTom2ZDa80ruKowY\noSk+\r\n=bO3L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqI5MYsOq+vktXSI0uQQDX6xMn1hZAWl4NLuyWY9l+RAiEAzNPkNXyWhyJZpas/skBXd2xa0eTJ0w5dybbsEGztgJU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.6c0f0b27.0_1584047838430_0.38575637829020937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pLALBtaLzjUR+h+cYADBPeOFvi2u2gjMj3XK/G2IO5oWC3KyB9ukPjt5I3sYIeCBFaMk/7Pl7tJf7JTF7yR4nQ==","shasum":"2fcfe6bbd23aef75a7686b234c0a32bba7129aab","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7r/CRA9TVsSAnZWagAACRgP/28pP0OijCvN0nbQQ1UI\nlh8M4ZAsoplTZyeCcqTvgl+k2wWSUqyzeT4Q13ElEP8soVvxH8GSPdWn7oLc\n1kmgddWht1plfF3M3oMLxUxUXviOuSJ48NncmXj4h/qEAJctxZs5XpKqjHzk\nsuGVbDNK/v1oCJM53T/hONbEn0MZ5Wvnzrsu70C2+VDhLxSEg7TNQc0qe0ey\nRvyoMZ9BBl4lSWPWpO6e4AuGP46mgudzmUy6FLpJJlrZlpoIcuaemk8ki/aJ\nx+n4cr6vadxUh/WiSfrrmBbwAZtzVUrc7lp6xq2k0NNDtgM3hjkdlHU4/Qdd\nj2/J9PmlVTFduixJaMGJpGnTCAOxPy18wKraTjquxkU8TNXEVslRyeqRHHgd\n8FvtXvRs5q05ZROFinszuvd63mwHYz6ss+WhMxp6p1UUrx+gJ5EIRuUtrB5f\nZ7Gwr+iz1FBShzFQgM+qFu4XcFuFfKMndZsiq975eQcJ5vjTCWT4cDSuyHHt\n+Lmm2cRmJuSXr2s+/hdNwGCpvGAuw5ifPcwGyDtbtEeMWaT7/4gHTGllfU5B\n7uuKZfOW4wGFeR7PopjFxFl6mf5ZPZ85e96ukZTa1olP7hU8xu2JsNQFTRXT\nF0mU/GfQm/7Xpb/456MF/17gyJm4dQFOFtpAuap+p8SEp273myhcKFp0yYnm\naOHM\r\n=jTqV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJMQyTLd4uFoeEcvLaO46/PDuEAy8j0jVBwLSR2WKoiAIgYNvA+lxmqp3LCWwC+occic4NgABohfsEVL+fbd4hMLM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.b6c53425.0_1584118526624_0.5768860655954158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TUh6dmhMDWrGyY0dpJCCz4cyA/m2vX8f1M5K+i9V+mUK1EHObmz0Yzp3bzfpOdZGgqXOzIK0dI/Oqisgmsgosw==","shasum":"b443b29b44a3dd2f2c0361b17f608d1669233f53","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT59CRA9TVsSAnZWagAAlHwP+wbbNw99imQFOCDY2RPX\nGWsrSPIR8kD8H0IqTcuPEzsB0I/S8SDYFuIiK7q2tw3tcR1DIpzF3LC5UWC4\naTn/LgCZVzTyxnlOHCb2UQMqxvywDadHLAlpg84jrhBgZbQS7qjlc1hFyTLo\nGsBkwsHxCo9ol7fthbCxF07XyIIylErE1nL7HBsq+FsAllEp8xUgRzzSKsFk\nXds27RKWPZ5TFt0z8qRrpTTHq/++aDDn++Nd+EfowKmGXYPtFCTAr5yGCuQF\nY+pVIFpdis6YJkDaHqKM5SFwjE3tnpQtK5S4+YaoK5PdZFZUDaIIZlgL6Jqn\n9UT5LUYNFPKU6jsetJ+iIdkVxOkIzbbq8qe+3uVWYneQW+8SbVjHAs20MUUc\nNoaIMMdkEbmLVSqZB0G0BGF8flTmwXmTKJzS6ggWGnxvPPAgNooWmyUpwcnm\nTF8bzshGyi1V69RzhJQ2itVNfaD4NJLITepDZfx35op4Ksihw+JH4NnVFfU3\n/wGvSwDE7Onfxe9P5I/p+735+yrCROE0YbWa1MYjAsK5XNiZEUUaqDiVwT8J\ngVwFklebH5BJH1UZ95Dyej00qqXxSKb97CgRGofKEvg+2b4Q8PluY6fua0zp\nI2EqfQdc4GYoloOaopqCkFgvZFMKLHPe4IigRRchb1qTZzJnooOUZdFO7EY1\nUOCI\r\n=VI3X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUfoLn5Z04+3NChxHKNcUEVPECcVgPfJGPffynt0YkAAiBfABzyImKD0pVyBGsbaaVvYzf+zl1zn4G7lIZ7/XyOww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.306cabed.0_1584479869492_0.5625591513891799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-qC6vLQK8gNPzyVzveSt+IW0q/ENSAXfE6ZYbwB+V6BlhKiUsA1sOpmcPaI9iiC6c0VQHUmq36WCz3sBrW5k+rw==","shasum":"f79c397eef71eeb97664c9290621be1dcac237fe","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/tCRA9TVsSAnZWagAAEmEQAI80qnazMFyBKYznVF+Q\n5D7hhJNH2LorYaO7RbzIz7Oe2Co4SZenmI9XciQ95UWAnKD1VMZiy2AW4JmE\nUmU9u89UCq7seJc8xFE87gk1gk4M0Lc4wYv2TFfAN2HN9hnrv4Ki1JxhXcu8\nzewi0WPs3hFJi82ZCMMpKG3xlbyzpIZEqevr9QEjGbEqYzQEpVr6YvfQSvJa\nCQUIv3cjz96SiP9v2QA27S2Il2t/uRDntmR2jMXJCx2WlDs204x5ORBBSHl8\ngvJnMHP4yr2FuOkAszIUfcAiYBn9Ia8Ui3olb8WIN8ByP7Aq3Efgiw3beBwe\n+T/Oy7ZXVfYS72JqfN8I4MeSUGRme8u7YkETqqyYgaUu5w6UDeiKxtKJXR6w\nX8LCyyU/3uAGhEGI5HJkY8vzv9qB5sJ69fcCZqve6bOcIFUSqe+3u7qUTfr+\nwksKUuS/QV1nQPKdSgBG66VDHA0RvpGkOHYakTx8qT7UccOekLHduwYceh6Q\ntUPykq0MBmAjQDi5jEQcH9a1zNr8PlRFCuinN8Lx7nJfqRKI8/kEGgjU/cyo\nh0fi94m7sy/PTOuTGUqvhqNBQAi4hILb9k7p3kIm5oWmSWbF4Dix2v2xjjl/\nHV1AldtyLW5q7CiqaZyWnjY54xp9JdaBjCK691DEVD49T5f6EFOzqJ4ylveu\nqJFw\r\n=d0aJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJLr646KGt+oMVSqVNYjLu9RK6SWec7nGzNBikuB2F3wIgJdKHB9MjMGq6m65MqUxBAGUBPYAaRA/q+7XSiXRwsT0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.4e250cbc.0_1584480236738_0.7319694412585724"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xq/vY+JrCp9bbk6Gp8iKC9RcCsBJsWonRxD8ces2/om2sg4Qz7sHAbaHadnqts3MN3yx8vgtxT6vS0AAiMpkVw==","shasum":"ef42fd57d84876d2b63ac336d1fa3de6bd38f884","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZCCRA9TVsSAnZWagAAxrwQAJWauBzCJ4p6m1eTa0px\nB+mMdNZqkCjaIHIFtLpCflhyYw8K+0VLI+mHp3/g58l/Lixv/C5cCsw1V4KD\na39kDJOXBsQI6h3LRnSx5ZdXCeEsYG1r6TRTBD7Kvt/7OkTjoAwCQ7PqK1Qs\noikxJw4c/+7ovzAyhZeDOtZ3SDJlgDclZzDOAG0St6CM8HJbF9oFX3XuQYxL\n3KD3IhyDomR59+/3Lb1K5/HKHfk780B42XXTYYeRjDAj7+XeB4yuaxWClAut\nLpRMc+CTD9OUInq6znluGmktBu2Fj8tCSU+gf4mo93mgwpvKrYdQeb2jX+A5\nQP9eBrgaYOklwHbFXEyl5AF00edIG9IRKLpdolPK68wZEdjyzObwo0aC7Z1e\nYScptFEWAvsktqKeXxQiwNM/c+ryfeK+eRwnqAjkAVVlaQbhH+hxNB1XyJ5l\nKkRaFAw+jReZRhDNUnyVgAhjRjX8VQZ2gahceHEUkBYQFrbHRdDdo+OKBESr\nHpOn4v01p86DS+2EIJMZKb7LN519WEQVw4wOISzJIHbA/VKLuTjIVWVl0sI7\nA8osE1FUeG77QBij23z6OHRSNaAJHm7kkhCtBVrv5kHCDRRJU4+V4l1Tiigp\nihvefShw2zMpY0FaE1kbrDOi0EOt/Sso7mgAS4t9wxMCGnx0Bxc4fBLPzMMv\nC47L\r\n=jstI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuOcJiK2GOuLTDLbCbuwJd+GkO54B2Pye/QN9YaL5ChAiEAg8NKTMmGwyTVVR1NbfA5LZZu1vRTUoXyn+TVnFuvdmg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.ff82d9ec.0_1584555586383_0.5837744955627093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GX7mOZPRiWWNpdkyJY5FqMS5m0OM+51ldhJ105gwn49s0ENjMccNS1+nH8quH7P898tYSqRR0VR22PG9eSYc1g==","shasum":"556e29076006ca7db7ddfd97aa58f52e5ee020ef","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AgCRA9TVsSAnZWagAAgdYP/jB8VNeeQRb5y8er84kp\nOt7JBbiaeLqjicolzoQ/XTJNYgQc4do5LI1SqQR1ho4m1vQY4BfuncV6zG19\nNfyH8boReP3mjwloKxdlvbX9tt1A/aCujp7VNPVLdbcOkkxH4xUTSl38YC2M\nBc/aFkG/vtDWfS1lIHmD7GZGZx9peQRb0a2iEXMsqJw4tWKkc1htmsxqtvI8\nJogGhJET+jEsdh72OCzlPjVo0OLuxxSdjCDURkvmyPN0BRr8/ZfVMGlwHACk\nbtMP4WZcAhn36Yvl1LyV2RKsSL1/t9zuDgj5Spu4GDJv3jCNLMHKCL+dk4YU\nClAIUVYjQrdj4cM+gpi+hv18QQfgqWsCsGXTc1TQtM7EXUUagv1c5vFaQOF7\nrQJE8UYtNXzBaksSlIh1jGT3YK21+WFSxk3ieS2ad99GxqpHt2+/ucMwjq50\n66h4RyCaOhS1utokMeBoCf7gs7VYHjnsh8CxmJZHwYNecA6jDq3JfmTz5Hxu\n+QtfrmAB6Ozyg3ktCOQHSXZbvcOT7ybBD67WBgWyeVC7qH0psRer3q+TN0P/\nOzXiU8/PvMYfNqu4VPFOOl3RyCWjF6SGVt9Ypf3MthLjKyVv7cEHTd6hI50u\nCPcsiPKSqH/w8UoXAXW3PevYS0B9mabj/2CIDcQKzIac03HPu2GU7/zkNzJu\nOdSa\r\n=WsQg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ7/kYA+ezT+xfzmgPyzlDDn1dwBcyB8odp+vP9z22cwIgLvPcpbBHK58SSG8bnd1uwDpQSZ3D/091dUe9z6tLyo0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.f50f48ef.0_1584644127874_0.9174981641853648"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-erqN2AcoZkTYSGmRhq/ptipTQdbDxyoHI6KdcrOHBzycDSGbnKQi/dsv0gAXXmUpL+LrY5cwwQusRFOifQnKcA==","shasum":"f64615afaf395f36e84d6ec0ca736060544fc19d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9h5CRA9TVsSAnZWagAADAoQAKDi3WwsBKOOzYfUaJHJ\n2BUetnuBwWOzi8WuQldMyQxs8lsO47I5SpZ94QOof4keoE38Zn8C3BYXEV53\nR54rFS6Snz4Ov9a++teudO5n5dLiISNtvn1vAOnGlptRSStq/hvLAqsoxXZ2\nYi4tCaBgU6l0Paq11aLENUCslms0g0l2vAVGDaNzBHZskMgv3Buhx8KLoNyr\nRGJ6WrEbL3Y9oLVeLIWj5Qc5sShWnaTWmMaLxw/94fjiIR8QR3pzCvdwigEu\nzz6QHsY6GZHy+vuOnBPR7mwmm95NhbTeovsLkyV35pGIYcCWdqnylyqfF7uU\nSJm4QxDajiY05qRPCph8TZl24On2XW9QsXa8ZKvbBcMEc9T9qd342DleR+01\nVP0HEOiCipxpJjd0u1l+Fqn1Oz/aRI47Z42i5HxFaoU0MqIRK6niB3S2kJzh\n+pMSnY5AiVsmhVVcpjZkKuM7Cx2czFOKV5Ryqzr9GYENv69UOi/Vfsr82/O1\nAn7yIkE8w9+c8HvW6+ZnXbU6K97qRBQ7ZMKP8E3J6WaNwMZcRUfede1Ic4rk\nyejHwTH0sGlQz2T2OIqgBfeNf7IYTKOUaq9TPDFSS/iyiWdQH7xvpiXex+vI\nwtc6klEpoaty/EhRpUeW8ql1saKTzsULb/UogLa9EKe2PNSZoG4GU8zirK75\nAAtY\r\n=6AzW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAaFNvgYFxUjm2etfrj076V6auoJ5JAQjIcx6z6ZVn9gIgLdjTBQXCeRoKqezQ7kRsX/Az9ZaycYrm6OpCVplluP8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0-canary.134cf877.0_1584650360683_0.3515131560881952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-Ih0eq8l3zHM4Rkl5gbO5ZaIJTbsljmaAlDBis1jYYgd4dTa4v2mGpiJ5cm3zllAZMp+ETio3O5jpGBmcYZZSEA==","shasum":"6e193ad44ffd3df346cbdf2c418c02d9659bf5f9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.0.tgz","fileCount":16,"unpackedSize":55616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QICRA9TVsSAnZWagAAef8QAJAdi41onItl3rFjszsI\niTUl90SRKRuDDt/2aJr34FNVhuoeGMex2HFluzhm6ym1epVCyHAEwhu2iK4Z\nbw+rKTxGw1+k2vTnqWQKA05+jlRWhuINkw34j4vnTZ0odt8cLZrcdtTp4iZ1\nY6F1LzQLMEjLX20+OZiipyhDabWCNNTZyMvgExJxcioIh1gDv2Vb3nrl78/r\nurMrV2Wdu0rLA57wxQUXF2tlxZK0d/kExEya1tzYRQF7lAgE5uAee5Wnd9yR\nOExvbSUEaW1uLagTFEebYPoMM4iuVmamnXdA8gEkQlX+kF1zuhLSGpIwfRUQ\nMXV8J0NGfCmv0nyFYXs/8yJx115qPweZ1Kpu3uTPE4xih49y/JQCRJOcGsHa\n2FzrM/v4NQPPFEW2JYaL8IAVCgXZX6BHCzkqUDr30IHmISJFUCTTDmkLj1Lq\nvcAlbEGx/WjrECskJVomCkcThE+ejNwMvSLWm0EpEOOHGwD8NcT6Dzn2XhES\nhLyxKBYyk0++tsAvcQkaM9ZcN3munOiWNkebajv/M8Mll6qOev2sVisrkUCp\nVRGEbKgbjhipRkvAalt02VX1koDyAuXasUxQiBdCbkYEKf2qNGhH+a4IC/Hp\na31ZZUFJ40hg15lHyIQ3Q2Z26OUpqspZzYCM51uWlx4Itup0gIuJebFXdvSr\nvS9F\r\n=9P83\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVWkVFLQvo+LVKMMjP8VM1bf+eICnlB65YxrxFATIq4wIgUdDLYbwS5nIpMP9Tw/b0cVkq0jcqr4kwoQdqZcCncAY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.0_1584653320078_0.5134210849575425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ATzZ/7DKp6wz11rvfEzq5VYNUMUwBCbVY1fvvkGwZ3C6IqI6Gr1PtYnb8lkEsM/2WUrDOBS8GGXlZ1DLFOMMag==","shasum":"13848a516854f50d4bb9696eb1cae008857ff4c8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/msCRA9TVsSAnZWagAANw4P/3rWrngH2p/PUzRWVo+F\nJ+9oToH7dzFYCM27wMKWCjTSdtzkipXyZS9zPa8nefi0UlDacZFlvDhaQOj/\nKu7PTh5PGagZx+3Tec6PAn/ehobi33TTlrB13SFzbp+1WQ3bZa2dg6puWiz1\nPVjxaq2UyQF7IvefGe/COljVVg8o/CSyueaQFY88gG6KqaDhDpz7WsywduUO\nUjornATWxVKUFvG6fadbiw3JfHL+QFWpnSWkOHUWzTu80E8345Xz3+x//cM8\nEkozv9wxft2Zpe9on9IIRYkKcorSMY2qC2+oxTJsYTUgMWa0ewoZiHG4LJX+\ns+oVMCsaFNYGPLmzcwFDF+vknq/OnLEukgx89sYdJNeEL1C78rO4WrCQiESz\nJZfCQ0gruDBoxD5lUbi1geHq4lekfTSfwKl32PZXhFX16AiCK3hzUuSWipdZ\nJ7+CWQoaJ0Emd9ETp82aSeVyB4VNMK4Zzb99FQWNkbGgl8LeGNWGfFyI/vGN\nOMru3s9dzj/LLco5Db1uPDqf6xf5JdGdYSjEJIg/IEzm1EuhSqfeOgS3p2gy\nLiGsAyvzqhL3ev2Bo+Q1ck387+UUU7yWtGC9DUJkBPs9QyZdZtSTMj2a1Xsc\nekV0iMubL12T4D4nNpN2uadg26BqzIFVeZ6dqa3uZmg7jMJb023azn8jOuxR\n2qVt\r\n=R8o7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFoeKB0i6jXRnFSr+u6bPu/J2FRXpG8kOMe1TY7lXjrAiAvHuFy9LxhK5WSkUpNEmWL7RRuXGUPBGNiWqAwTM335A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.2c1a4913.0_1584658859502_0.4215109448208112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XgDx2Uvmx92G53lF0XA0LlrdD5nTh6dJn3ELUKbhUrvkzBOsTjCQ0sq5Zh4syhaGlL6/KRLPy6TS54dbWYz6Pw==","shasum":"c7da6a6128f36bc73f97b96dc327118073e0a224","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQe8CRA9TVsSAnZWagAATQ8P/RLrHi3Jru9Ee+fRoxPX\nORDQ4EusnFP1UUYSQAum4wsfLwmUysCWagiag3PcNJ5pXk4hOZ19e2ejSoXd\nInsD+ORVw6Q6jBxSKBE7uOv/aXyDDIx5ZR1SBHpP7rPYlxKxhGPyZL7hwwde\n5+ZcnO/ZkCuNuz21+cvSJP7digqQKr6YUSxiB9ov2x7bidNm8mZiJJ681phN\n+QsNOtFHQaL0urhvjDxFUSlKoTlGo7OKG9w93h68A2Y9QH7k3CuIdkgvJj7E\n7n9acSpRkJj8FQXUGXt8JY39nsesmxi9HmeHTP0vQ1VK4Wfw+dtMPZBwtp2Z\nkD+WLCMabRNyY8oGBi5TTkcEnsMT4UZxElxyRXA5d59GKQgx8Z4CQIFVU45U\nTDv34mt8+/wS8t3AYntdAO6PrrCxU+ZpHpqz66M7NIAlsmCRMCADqEpT74tf\nzyl7VZzr8kVd6G1GLd/p40+gelxv831zFWhBN9uMjlwfM3tPkSbNZHVtJrvl\nhRp8wLveUDo0Gy7SxsWzN69GZHq+JwJBdLpudUOuIs3P/8rFRwEzSLmz45GE\nlx0K27o3aqQFICWHBWUEt4jySWf2UzzbzPPQ4Ydn9g3/Eg3vCUgYmx7W9Tzp\nUUlCvBveff6GYlpxRK+9zLFaeodkmKl8QroLUSjHtJGbCReQ14ABC0ey0caz\nbEE5\r\n=RSr4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmQCLfE/olAMOCNHrqFOGSKjiTM0y8GaicZcw1xXYaHAIhAKFfBebPwNjDGY/LaHpDn9mShL7Sxc4hCwZKrsAr/SK+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.3a6e481a.0_1584727996417_0.33173254636018923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-O0IErvCKlGi1E1RmZAU9FTv5MhM4J/lN68g9/oIdzBycQvh8LoorQJgAXbeNq3UcE8Y2rI6lDDqCnqLFwXEI1g==","shasum":"b517f4c01fdc8f9bb83500fe20853e672569501e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTc+CRA9TVsSAnZWagAA3nsP/irZxs1id4z5HxN98tV9\n0cApvXPqHGp2dwtxnflEVd5GA3tSogcaDuyUGJJ0Xlq1sB6nEMG+Xb24ofw9\nkXHFPEWOD6L3y0x/+OnSpzLopKi5CDvnDm/j91jtUWHVC6CONmH7bFq0RiZk\nvjd/kGBppIPTkFyzrZrjAoKE9lle/8k9uWcOebPH5cSxmC1e8nBc+OyAS8ab\nwFcJJQAJZCbRkHAQ2flZz5+EznpkVc+MOBiZrm4VfXAREp2FSIePwvgoOjKm\n+/D60LFShCAFC+k59zKvvBZ7GM4Sx0LWSP+DRiCLRn6nAQ25AsktWajL9Tbh\ng+weIJjMwTn2KunFFq3P4k7a5E948I/D0ow6nL9x1HZ+uQFd95E52RWVIQ/a\nofh24XscTjUnYMH/tIrqSpIDE4NkcaA/2ZdmiwoPOG9hhGbgDciStteJgm9w\nApyNUSWXM4y9WFJ+4CjI6uJkOeKLKpz4OzzS/4+l/kIP6gFB/7EWi4UIG0ur\nxW/8Sc4+mYKKuZSGeZ7xYV6TjvXbPyCTmYkI3emr5veXZujWlboBbipJYogG\nRLKaP20zwY1Am8Rh+cBw40z6+fNdrlCfLDB2U7zGFvOlMdM6TBOGCoUhJVYz\nE2TELbzAubJbXacFJ9DqdeBl3tlsuwzN22ldt4M/MRAGAV6M63BsEOrIt/T9\nlDFo\r\n=VMH3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH87oftJoQimHbsnnJ3IHpQO/G/En+D5taqAEDugf+LhAiBvXbRWSusAGrA6jEIXA4FgDLsB/06x0b1k59cZ8UVXkQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.603d6eb3.0_1584740158006_0.2343961825530252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-p/L8ywrxhBw1QZfYrAhR3TSIuI9wJ1/8cbLHZ8p0jUQaWBpqH1K1WrkETVckFiidwvRpk1uPREE/kard6F49Pw==","shasum":"4291ea10d6c933d8d9b3c551a4bac7259521a7ee","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWSCRA9TVsSAnZWagAAyGAP/jcMynP9OHzlGwDkOJAT\nbLFqRR5kx2zijjkaeCjiQAY9MYhIGCN+thWs7q78PxqBxkUSLHKBugGsFQkX\neukRroCXZdxhfNET+l0H30RUtUJjE05rBUDZwu4gUjxDqJXCG8NGVgJgxNzy\n73YH5JLoE/s7Lz5sjaBE5Dk7yhEKKWbeZW5HwfbyHcjqkEy1kg6B0RGzgn8L\nBdi49TIp/CzN58uay/O8ZtNZxOfoNO8P9gVD/yEaNr2LlsWi47Qn5Rxt/Uow\nxSBARFYsXYeVGkT8LrNn3Jybs+2Juy537UpapV2zm4IvH1PouGNTCtrcAAZT\njKrJOaL4ZHfhMI2jzWsrojFi+7zKHTW3mtWW2JM8mXfxrAtpxJ4ZKZALpqQE\n9Ne8HQYcIsZhgPeYtszl5uQFpKIQLRZ+oUy9O7kYSHr4bz+Y6Cbc9dAfsZY8\nKjUZDoAxBtOnn1P2FX4z9ZmIVCH0g/GDPFRqEEdxTNyjEu6BgXc9Z9+xCOWd\nbvb6onwqQrWwikUSDqWSu0DN3nl3UwQfRpLgoSwMR6yNy0U6yrKeiWMjdhRN\nI4839auxslQv8KjjA+vy5GnBDgykhjqrYNHL6tyOurRB+fWMBS0ipsjJXmKx\nrVFvEfix3gHCYSR1OWuSr4NCfIo7buyZtEm5tMqbJTXymlvNWYoWM7eWMKtp\nVsd5\r\n=pbCM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXPEyuobBvGXT34Asa9e7+rV4zTIzXZjGjP68ednMGBgIhAOlZGC+utRSCRFKxUVSZmS/toc3WiNhPvWfHL/XaGnrg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.05c6a93c.0_1584981393743_0.32370141443662437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-Qe8kH1uYTb3PxVlHJzh5nDWkKEJmNa4Dftb5bzS3EPKhlPBjXd1uVQ0hGJJOGeVBzdbVjuHz1mRGJvOm6n+c7A==","shasum":"b01348e638c6650e83013162d5a0dabfdbb089da","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.14.1.tgz","fileCount":16,"unpackedSize":55616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiSCRA9TVsSAnZWagAA2DEP/RMXOOiJ4BoeIgIJrnLW\nH6HlI38ZEgHfgNUXcr/6mZvjeCsectVP6kr+mh1eSedhq8MOsTHnXwqrlOaw\neA8ozQTsThR4HgNoI56AGNlzXLe7joE4SJ1e9TU1mEaRdyAzaxEl8JA4CHQy\nD/0VEvuu4bdBeK5gb1fL6s4ZWrAgbCuVJCiswW+BhljsVpwmLki1HvBWJfXC\n8nG9/rxdf9DLQDR1jxKVTRk3YUU092t5v+kB6rVMAnWI6OpueygEin7sM/7c\nw5W/CbS4mjVUZeZsQeIs6DZISaUGk27x9/qO8sbewXhv9d6u2JYFEnmIPeny\nrRzXDO6GpK2TtgtZDpDThFfJYcFl3lP9jCADDknLat2z2OkGsa0RGuuZloSV\nhYooDo18sxHrpLaxa2KThm73XZ+SG2py3Hwz8u5cUAGh2lChwK0RWgjQQvCI\nFh9j6nrpJm5FsN8r+RqDYumDStJorrSvKgdUApEWDxuTaKRuocQFxkbbyejH\ntTsOnOPRRfjBHR/+4qpWvlMNEPYE0BwtigHWrwM2AQ9N/lzRubNv/lH7u1HL\nrzUz+KUukTs22kbMZq2gHbIZpzxeGkjvzgu3WJfpk4fHA+xhIgoaA8NcX5Rl\nlXfYJsdlGrjEUeC7SsMnCsC9YTQW0Zhgw9ntG0qLxvitoIc9pNiUgoaYf0dQ\nbaEa\r\n=R0R0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDS7eAqX+e4Iuo2gEWOyDiBSVUURDaFNgt3n3mkNmKi5AiEA2Fqq3zY/4h5sR05P8Y0v3hhqPGacYLNSz+P8f0QOHeI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.14.1_1584986258445_0.12755476958635725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5+gZCqOvmP/ztlTfW0qQT304Jj4P9NwCYG+Z2w12lhrPZa8j6BHgp/tIf36Y6VMmdAysIflc+xa7m11o6/Nvsg==","shasum":"4a77dc0bc30a808c85366508e18a16df5c0d0c07","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSSCRA9TVsSAnZWagAA6DwP/iG/RcpVuFDdfdQesJMP\nP11vdpZtAA6ACB0OY+ktIRTZU9h9btwA31dsqfu4qedWLeUDDmtJPRQOUmnt\nsaiBnvlGy4Ojm1+riTeAYEdqLV70Il8kiWO+tRitcMuX7FEDdvNUlsf2dNp6\nb8kthym8+QSNP29MVSLSDhRWbwkxbK80AgbNnISj8CivukvFr84HfqtTM6c+\nUF/QwEY0twmRz/TXGkKS4iWZz3g3KcJLXAZlPn4oxaVDLsZyPdAz7C30Yib1\nlSJFgIotEUCCLf5/svNiqjq1NnK4CcUecvk+I/x/3JOkamMkcJxhZz05dhfd\ntyEuj1EiXu9aLBx30XqQ04kUT1uODV4rRubpZ+xWF3lTfTGALY6NkIHSo4Sd\nYD9ZRiISCBi7/89G+U3mESjAvbAFR61b1oLLzg70NL6qypo/0mcbHOz7zsA1\nlUi/+CdDCXiA6xQVat1XAPeiWnlHqRvtq3BBbaABcO9Ro1HRLebBbZ96XFed\n5b6NwbSbNWJhuTXuzt7AKAJZv5RnW90nizUKsRVM4HJYOyzqgc6hed04Oj+b\nxsOsnyh47Dcs4pBEenyIzedS/R1XTjd9hm++bZHI5SXYBwMUqdyu8CF8nJ1g\ndiKUNcTywBpP/TsRZfFB07qU6BaXH7AwJetkjMF6aJjthvyRVudxqXqvqJDI\nUBVn\r\n=8dxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH/8YfQW+z6YWZs9iXyCLgVdo8ybgZenIulHdl6J6xwAIgJRv7wNx1KPyeDLMuUbyqUdI0Fm2p9zbbVvXmfS7aDLA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.4e6be3f4.0_1585083538515_0.4603048465856432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2lmm2SsHt4QlZCGZYNfdcKikVIBolRnxljxFYrw19ZR0sp3VwUJ89qIILZ8FFZEa7ofHS/+kTwqxRLLHxuO/aA==","shasum":"4f8db00d3c023b695ce6957e60e1511cd467c8f9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeni5CRA9TVsSAnZWagAAFJMP/jjm2R+AItH5Cf2MXRti\nQppti6NcUONkfh2E/ZmC0b6Wzbmw7tZY3gHDC7hT8V05erPVGQhXhRKsEmru\nVvyNfW9aIILP9Uog26qOZhHheyAwLJ+ZBgUMT06pF+SUoUaYwf6Ex8pOYCzX\nRhzjdDgfHNPL/onOR1/kISlEtc48J87LSjN4FKfSDBh2j9D3AGtOqZIaBZt7\ny1NNYQnkH4mUxu2ZhTmnFLhsfZs7S7jycOLE1brH73p5glFoC9x/EChsdyYH\nHte9WqmqqfdEPaNmHqW5qnmx2cZffuNiZas4vyyrlvR/Lx9mJyUcdFZ4p1AY\n8i3sVoHy3+lzJk29WMPTv3X9cXnXQHYUChMsrWE/FvF2mjWBvP4ZVMmv0u8B\n9k1sqeygYvvE/8okJO9msiyWyg9j1yYE/GpyGxxN5mesvV2jbHMUjgtDcm5p\nryvghM3OQG2u9H+3j0gKcouUG/cfyJLluYkhwSDddcLkJjNeTRwYt+HNet+G\nECtMB0RaIBegM/WPAkWNu2VQyXWhJbSlTzIFfBOVcLpVNyU7qE/dYXIAnF5e\nX7yru8BUoJipOasPJhYYvIYyEmitxQVbDikTsEUGMwZQ+xRlp7ILx1yBswpY\nZVNlT/nG4jbx5f/XiL7T3Uj/WzKHPODSdPL1h0DYqwvxAGodQ64UphrDs581\ncwP+\r\n=nU5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCRVXh+mQqT8jmHblNLin4efwnDaGlaI3Y2JidU8IEYAiEAkI7Ub8E/tR7JQXmiqL58W3EQCQGi9aGCF0keA59qEOA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.c29a683d.0_1585084600877_0.857302673001596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bxdUiYwJtiLm0UoCYPVfvJQ4TONVHPWSXgCTuhq8hbAfT+gO/aYBddBB66N+9fg39yNjRnd/k3DW9ypuH+JtrQ==","shasum":"ef0ccad01f3c4bd2b63fb0ea677067609fa5d342","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsQCRA9TVsSAnZWagAAWNkQAIkIMBXwBUM4KhLxBk1E\nM1kIsL1onz74OGEbwdHbHzM1G/WQPXOBztX6KXo0HH9B1mRB+xQzIOqibY1E\nubRvGCBH5uHAU1zjPtB5/edC5dpEjBzy9XEvjy8NjtfsdthL+8syNZEabpRO\nY23vEvzCtCfdrwakmSwYC4UCYg7b4cYyMcJpA8fhQk4XkMjzLD2N5NZHhZIf\n85xOupfHqlUkP/NnXWkd6Q+c0iFeWcnfeZZBB3qNQS6rR9V2LWOPjkM7OQxK\nszCyRsQqJHGQpmoAEeM3bQ06OXxnOHE9dKBSOXqXJIwuAv6ZczOriqCvUrdk\nid658C3xJi45LybPtPzWau2FDgtkmg6y++/d9mpdgvKLkPGlbj4Hx8u1c4c4\nuWb2sAkI2nQy0l27SNNiMU88SQyhzw3wMIdXh+YZmYVp/FsA7u7XX9BdLrz2\nxksy5PVqnbgU2MaFx20Lw+i4DpFxPtbiOCMYc6v31gL/DjIoFI9iHpqmV8o/\nzbU2MnVu3gmJSchiYAPWlc/FWtJp2L/CVDYBt2EelBgLueK5xd6B0gVWLHh7\nR91VbDygIDWU/doP512ckxf7CyChS9tosSKXTniC1ZYb5OBGk4NSpIrG+HSO\nppxGHlKEbmzv03NLjpL2zyG6wl9pB7of2XTnSANKZDfvsiTZlvh/UuAS/VFS\n5pkL\r\n=Rax6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2VneC+d3KM4+xAAfNRp6TK8bOSiqKuDsHQpatrxyDHAiAEWjEFW0Ocq++LBlbOjKaHiCXHUoSIJeX9mDIU2jMbFQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.fca3dd9d.0_1585093392386_0.7928446279359116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RjXxphhSjRH/dEJi3TB4B/L4lPHBenPTWXzQ9hRIU/siV70hB+lQyCrxzZmS7vTp6t575qRjct8Z97a2k0RRdQ==","shasum":"892f55f292bf88c2cda10d50f66628e3276b274e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81eCRA9TVsSAnZWagAAEHsP/ibDtpIxxeoDvIqvprxL\nOqmq0edyhf4vey2tmKMsTO39hM6py800bZt6CG+GI7x/D75iK1H9IX7OArAs\nqGjNo9HaYq5gZmWZpmv95uXfPKo5n1IFVYZDGiS5RLD7kG2HPEJQlfBbtnEy\n1mOdZ9a2EMUVK/zlbkZO01beW6rAUMT9mPhUwUGFkh3Sf1XplAYqZqJ8ciG6\nZ0Lde6KgpC/5zKVDGx9iz3MSgHBehqNrDeJHVpdwq+j7vsDTspV6SDae7le/\n01DIGQ+tT1jXSiR0qP3eRVrM0rMMAwALODqG3zVGBqApyVo8IACok70adlpl\n9dAtrQcOjb0yKLFf7Bhd9IYykD7x8OT5oigRMq8/IIZAHwm33Jf20DR/KdTs\noc9fjxkXA3tSaSLykdnsSkN0iT5KCh/AlitQYGuykf15XrFqgmkv9aGoQn8j\n/6IYkYdsLw+4nzCmF7vuqmCIULUbUb+Lm9ytpfLHH4ukdIdYOrNnSgy19VRW\nts17wDjRtlMLYlxjJhvrMNrxwW7Rni1zyKXIoVPEgpdydhmL+lhmVbYHDZBc\nR8Kne8bxBXEP03klVo5+wX3peyv28IPf3iOOhujBmLViX4/76lO2CCgiMft3\nOrjDnesbuJpwGBQby0TnW1XrGXJtvcAgcY+uiQhEskcLv0F6ySKOE75wIloo\nZiPR\r\n=NyVc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBOFOUYm6bGFwEJrLccWAgwPOy9g8oJeBlUWqGJRM0rQIhAKeP/Aa7ppTmm0WTZmswEDx5fsIwCt7yNcDG+Zm/gZ6O"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.1e73da49.0_1585171805937_0.06085240197617314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-wz4vx9hpnF+WFFxq7L7/0xSmJpl7FTxf57RyBfDTtXzqD5UwHkHxiIZSGa/4qOXjv/9+8TdvffA8qiMMZTh0fQ==","shasum":"f6e37ae6cc7724e0b5dbdacf60293eb7ffddc4b4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVV7CRA9TVsSAnZWagAAegsP/R012GwVSyLHOeMd20aS\n7W+Rwv7X/abHB/PwzRpc0TzrVoV0tja9z79sRIjbncPRJ1VJ8Tj0Cu3Kao+F\nkN9UQ2D/1mYTNqQKPX1MVwFeQPpE7ugR6o2AkT9lrvanRvQqwMrvura3u4Ec\np8oHEBA84iPV1RdyDJysi2BkXkgQ+4zKRkLmqeqKHKOr2MeO8OY9317Kc7EO\nAQaxPy9JFyCYg/3pzNFL/OX3AUI4kw+bESdrrrpQrhU9vpq+svfLRgccvwu3\nqGlHhmj6bX2hAd8JG8nqukBpTHThOQ/c4wsFOnhr5vKnWde/+xo3E6BrvtXU\nmbQeILpq8nPFO+m+fKwBReCe0g6X5R3HDfNA9vSKzQtJZcJjxJrUyyrq5EdQ\nTjIR3cNsG3bRKz94Gu5P/q34WbMJOoGIMuNnRoIxl7VKkLVYwg3bkMWnPt7e\no5mr/WBZLW19sjbSFMBQYuqSvLUVsKtgKHVmNQBotlNz9dno6V6U2mTa4eGe\ndiO/3m1DozhrLa6NfCGrQm7bxZGhc76dNY6hXF4EcCaT6WJuWC7zXEmpSZB7\nqdz/0c2PHnfbgUwChp7vnJa+Eps1JJofe10loJMoMPR/KMN2disA4A5CGjmx\nuUGrBQoy4u1t5s8iv0DGrX3sKyf6JwcffpEAWFSw30WhHVmkIKjHdM6guDeR\nR7G+\r\n=QBwo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFwzt5AWdLhHo/0W4Y2J8LbGbmVPeUwDrntTS/zT0VkAiBrUHoydMa7eFejrrus5TRIzE0SgbCONa3eBYXzsSY53A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.bb6dfc5a.0_1585272186757_0.8508035426854645"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aSeW+Th3HTH9Q34t4aNRLRSEdn9vjaaz0opIqvAKrVI3AsJGqKgWg268OIqcCQ/1YPH5EJrke34zMBr3lWysVA==","shasum":"21c41fd287afe0ac4cad838d41b7e72bcb67f622","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefloyCRA9TVsSAnZWagAAwx8P/jJT2UkOZFPOloSSCXUu\nnySD2JNgIAYKhmXLVZWIe3ebMvp91dSywokMHVidv347ApvWdJ05N9Avk6Xn\neOPX7k4HUpTbhOTKAAIbSRyk5FqWUe8aBR07fSfK3YKQqZi78LHD2yPHeAqW\nl/qRLrVb9CNLtUQLMaZcKuZWtEv8gGzMx9yYYxTtBEKikx19FYr7tlZHQY1a\ngMxU5eoQJJfeszNk/Ivgd9LiKSQqjxyYkAF70dndDpFfgmRmM0OBQXL2O57z\nR483X7KmZ09JP6OVpdBcsscoprD9jqj4eDvyPnhdfRlyPDnUsbkI61Esll31\nOQUrQ7SsBK3FfUCNW8GmjebNVHg9CoSBPtC18F+O+kCEZNXRfHEqEynrRSax\nvcXUM72YLwmzM0BYPXpOOZs5KFi8D8uVYlZGDYz69hEvHXFXi7gYoyUVP+K+\nfa/VjbrkHUlqGeExjq0yf7X7gVDztbPfK19SUfQ2fhGlGbfBHgaHONaTk3Sz\nfaMpdDdrb4ZLh1hylEVrzlmGUl6LcfNmMfien1d53N2z8m21cVYvMPLRrnKi\nwqRfNiFqG8n1jlYoF3c46WsNpRLB6mk/I603Bb1qJrkcHy1i6hwy/FPhWje8\n5RqbxW1eWfmmo0FZJhPEDt1WxOs7TWm2Eipb30qmwz1ZB4vtaPr2lZMN5tWr\nilJ+\r\n=StPK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsZ/kOZE1fzcn+R1RCRqwMKNrAAu7+OKIWtMv+jffhagIgD004wmmJUXTnnR7G/RNHCOvy1iUAtlpgYdeRAvWniBQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.1884603d.0_1585338929666_0.9084642629906114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TvqJbVIAKdAulX4IPf0zDyTQfS7v2j6eN+ofjTG2wlwySBumiIbfL8VlEL8yz3kkU8rT0XWzZU9mNCk0e7PkZw==","shasum":"c3ce5a9cb7ae66dd814b4467e3475a753fb695d5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmyvCRA9TVsSAnZWagAA9xAP/A/v5Eu5icergOvj1I5W\ns30hqglsDG/h0RQ5vdLcx99qZ6D0cU3sTfjpDWPvFcNg6w3+J8NkcdY/DdAa\nZ1b2R268P/2CflehtlOcgTpz7VrD2TS6eBquaNVaTP1XLNov+b0G2uyqvEcv\nuZgjoiYTaBrMXe+rZoqwwxxrqs0di4C5s01lHjVU1tOQNODTABlGdT6tFT3e\nTRDJHL+VXhDJr/fmtB0sv/8bHT+sPZkK2kSDMMrKh4TXkuavpwUK2HCP94a9\nVoZx2LJsBanwwZ7OnEw0Z/81FkrHwYr9VcMry/68UeHcaZNQ2g/85j+WWK5q\nLMMFmsKufsnL8FVg494uCNBeFdOUnySTgBqxUT1UIScpWpuxbQec5riMz/PC\nq2mybUSNcqV5GXxnSvfD7HBTc8ERFdNki8V6ppGT+tie6M7kJUltl1/TGl+F\n86Zr8AHW9guYbSxyipgq3NCLtc9Yjp+RbO7Joy1sY1EaE0bRtwulwY7bVvJo\n70JI5d586z1nIiNUYiZDwRX5u1jjDPE4jm6ohd10vsDjN9DCmm+n5bQCt4yz\nHYBIoP4YDbgjN52EY29Av430YsaLw7BAm96modtQEc+obW1unHfk/A6CkojD\nYDTjwIohKnI3sqkXOdr7+hqL/bj6MgA/LGCILxHaCm3etxLrJSHmPJ10U1St\nI0Mg\r\n=nDvO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLZBRHhJrjGFPXVsEim917IuvxJs6lmM5QoIKhuR5IqgIgesOv18g9BS+Bv0YqYJvnKchVH5T5QdQcAtsuEZzim6c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.aff73cab.0_1585343663539_0.9244131346293267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hCdvNwfxKNm5/BlqlwC1Gg131x7JBEJAS91zpL96aNL/okL7smtz3nzL5adlBrid7MNNtl5WtRnprcNfrub4nw==","shasum":"639206580c679b8f7f23484517d085edb606b2a4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gQCRA9TVsSAnZWagAA2coP/RIPRoSdF/m2Jtxxv4vY\nbtrU3TMOg930k9/Bf2XibDUHOdn2dmWwOBENtnPazlisRzcBZbIfSlab49Bj\nar9abiZqkcoYeyMYpzg4l4UkgBXHoJI84u/yyg7NgYDqL9vztGGLCXGtZuIF\nP70qGZv1z/Vey0zDDX5n7ZXsYMfthLercZcnA9++VSXXn9LEAqFYLOJTkbAC\nLSpouuclyyZL0G9JVeWQsR1dUPW+p0fN/mc/HV1vV51IucX4+gYB6w/twiP1\nyNvLv6ON6Dq1U8qpSrq4SFG4kGtBjBlxLAaDlOll9BgE0SEHNZQnNSvtqXed\nBUR0+oRfChseWWOa47CLvp72BdAAlUBkVP+L5dbtVsWg5VtS3cpSFIPhRGlQ\nuN3rDfXPpPBaHCQRZRvtsWbqQcb/Z6wwgFaL1zTg++im/gXltv/f8K+AZLBP\nreRq7P3vs3fX54HAEaV73XTzsg/9ChyC/SHXOQ2lxrnF5KCvk8QEqYXuoGiI\nWPKWsa7LyF66ornKuoMMjG/L7DP3eI720F58t+n5HM0sBrSVWRc9T1+JCfEa\nPNCCqgpFhu9Jj8rlgU3IvLyejXXH59k6dJBTo4sqRKgFZ0LjPxzgaz4mM2JQ\nfA6CJIWZcgPgoRfImfH3tCVfljucQxrb6HWp4MSTEcVH3++s44Iys0N6MOuO\nD5VU\r\n=HTFm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeoMfYgmPUJH948M1/gMSkyPs1vZOemM28MCQDaLjVDAiAvj05qw2/cHjmHRvTZhDWTSRVwo3pJW7EADb3Tt6Yf1A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.63168f61.0_1585678352090_0.6345527234082213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Sx77+L/IKVokGIrouW1D2hUcTZylKEJlLzFWW2mBaJPl+9OlOLVonMKr81wgd7ZTgIFPlf0iQsQGGaJin4DDaw==","shasum":"703ea56b70d4918dcfea980355cb13a0fc825bdc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QUCRA9TVsSAnZWagAAEJcP/1axSopqMOy6pVi+CdGL\nZeWs0d/CRjxaEpLn2trgfw+WysokhT+emxfdMrStxGecVPPyPhViqPDrsosq\nimrhrVfss+JkakIlBT1MXWzomjfNu5n9PL67M7tsPZn50C2JB+Mn3XKqrauh\nk6OIs8hLN3mRsAGj2rw0IHmUE4MAmQj9IK7BpM4QiJ6elE5LtHn+cmyjprEZ\nzkZ8mnoHbY7dhjgsM1gQCnsGFXxH0cFJlWVRNZjbP9TY/rI6TGJTo12NdluC\nftwL/daRbM1PpKRHANY/LSBziVgOXKBELuJqVyH78VtlFCvITQAYxrg0axTl\no1n1oR6RCX3cLj6JP6AJ5q5llCD95xhCtg1ZrURzmztSc6N8BVlJJXoZ5pUm\nJfsgRSKqbyLAKcjsEEg6WFM36V1WJIFztlG036VtIdV0QtG+i0z1bxfBtUlo\ne0y2Ji1oY5BEprlpjbqCEB0nkkmJI9z355zYbbtHMWIJdJO//qYQrAvR7hDF\nY3hB1+1VpP9JpVRp3BElvhYYsFgx9R8B9QvhP03XoffyvJlIVUzE29XyZmdl\nSDsXmI7//0U1hPfKfpW1v5FKbi79SqMqM1NODvFhADlECZJX1i+4iH9IIvhv\n0FMBu1oR9ZcWn2+n801mzu/ejYbGCnq3KMF7E3xGNzOAhXSMU7Qzm7sNoOuQ\nZDpM\r\n=nYcP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYWkG68f7hnDcpjmgy2hACvVs64xDex9Ik6GMguPYtTwIgfOJ1QWSfSzwvEVYjQagCZ3PTWCwEdCf1nVLCs2ZsFk8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.9fb79b3e.0_1585689620481_0.041480631794790446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-U/8Sv7/4359gnnhcouyBIX+oVhW624N1STZ6i8+8jnMwmabLQbqOd8vuel1ExJ+Lom9buiG6WsBQjogwfzPZBA==","shasum":"0be20316a2029d732b93f6f641922c8d9045d7b7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg902CRA9TVsSAnZWagAABJ8P/AtVHX3/4bTm6TxzvgXs\naP2nvK1wgQvnKARY+Tc5zV42gM/mRPYtPDEGYiJeeucsiOKEVbsb9tdF6FPG\ntoWFo2y3gjmiLecCHEoyRFDDaIUm1aOHUuxNzH67PdFqLrzN45r3E6TOfmdr\nzT1C2fx+wGuwNtwC/RGZS9HtNbGXVcvTUe1BsBrZQ/n/EZ4VQq/rtRdP6sWn\nzw7gvV6Gyeiitv8C8m8MtlbUGsrlWcPiTkQgEEmktiI9IZVR8freF+MO2veK\nxEsP3EcC6+Pw9lKIYr5CsCszXyyHh4uUczLBztD67qtNJ8qAPVMc7KyE1ov7\nuzqzKQQY+VpCYGJrCfyRsWfW6GGamYRENI7Hgaa/z2ZGs3m/BEKRi/Q6U0fv\ncqKWsDTk6b32waV1mta+h0hoUaCba0r7xUJaKKrs43NBiByEmMm6fJMOMMUm\n8VEN4bpdEZ/tjNVM9niPl5nE5CtG6UNRPxJVG6JN5cV7/Y4Vv5M9k3zq2tIN\n7UvKZ2b2i03M3sWkoqT4zer7Lj09//GDlRplZ1pspwdnOqBT1J9+yAplfV1+\nExUGFf2Oa3p3wKefqSnjF3FEu0KYNCg9+7nuNTV0N9twKAv26eKlIVueJqy0\nejgk1vs2bc5ZpkPgaENCLS0A2rG4fIn4xaSQ5q1eCOshNvn2WU09JswCmpcN\nIAzD\r\n=m5yR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJHARRqYM7Ahy7CqkkiMWVebu4hcdiryqfhZDHjJsmFwIhANm9rCAwDS4cX6p4+OFqqY6n8jd4P4vNKccwVfWd+ddP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.9bd3e9e2.0_1585700150420_0.6127285010822019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mv3ZB70jjbaMVDF308YfpALYq2zFk/F8gSHVJPcyRDaPcp3J+G3wRa4aRw3g3aJkpwOewdn7/39hEnP+NZEyWg==","shasum":"b13668e180a1a4e16b5fb9e8ecbd96bfa2173bb8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":55683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/4CRA9TVsSAnZWagAA4NIQAJk8ubvV+AdSPpAlEuCF\nG+ZjaeRlVmLqostjMfgOEarI5DgKEKdCFFPO45F//1xDIe2AhUMxXm0KhnxJ\nIdZQQPuWiRw4JBqcGJGj0RlEYqLIKpm3oM1wPi38D49CIni3urQQepMujUyX\nQGkXlvLH26SEKSij7riK1Mye5S2zKaqy/9B5ymav+EZ7kSZNhRVxHvno+s9r\nblW2EZ4dl3yrOc6RqTtvS+PRCUmuRHOLTT2BbhiDdI+UHI5ncelcM1X/pOSu\nzLpc9CQZjeg1Xq3ngZ2hwbiQNsMySNEQLdW955DQSIr1eMCHxSAZlIpEgMrZ\nxeKMmrr925J61blyGj6NHnB6lpc9TgCuHjRyxPpi/ouvZ+65E6FX0G/AUr2s\nRxAi0tVSi8mwQVICsaJLVsE1kk93UBICFdSJc3I6PW+LnyKX4uRjnUD3S7mV\nd7pd9OkJ9Q+SHUiK1pqkowZTntE44Osh2uOPi0xkseAEgm1BFN9Gyu9Khbua\nOdkDNRDZxiKuwzlMQUehP06F5kFq8VjxCyNNDYqCjC9UyY2QS8dS2Yi8lKs0\n/Wz6y49wv3nSgGw3pdJsy/Kh8I6RWs76PXd/0g+nQrSxdbn6HYqRUyDJ8Jpm\nboSBaEgq82uBAvZ+rlpUAINCIOtAfW49fiAUdl75vsCvGRfs5o8L9uSjCrBN\nRWuB\r\n=AIug\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIER5hW3lBnt4MaDhD4bt1ck44gTX361a4E8PYUMP5j4rAiEAmKVaVkHWrUuU2DWc0OsVtRO/QYDBNR9nIJ3wx0hgLD4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.072084ab.0_1585766392319_0.7154160523885029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xXN9j7W3KZWP2OpaetawnFHYxs0h14QubgoSDCS2s9i5/kuHgx6k66zAsddd0TGCqscPmi0Rrf2zvKy5DGtf2A==","shasum":"8c997b2f9c012f897dbc5bea8baae5cde9b0b310","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":55683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5y8CRA9TVsSAnZWagAAOWIP/2zQ0M09GCpYgKramjXJ\ndqBfqwf7byUg4VTR70bRKBZXr/RiyOaKhnsYcIBWClpIdpeE61aZ4PPWgPP7\nOhP+IgaFXSIziOpYlHI9oegFZBYtZcy4rvP3qqpjuyaXryWc0MAcnEZOQV72\njmsyxaD+iWffeZpHTo52whX/XT472FTfjeVQ25V9gQnE2m5TsCU8XpkzCr2i\n1JUwFYzovbnHht9Bx5sRDaW0Z2Kagr4WTk5qRrBWHD3OjhwxBvsjsQKeSNBl\nksk5/B7DqY4HqgFjF52k0Ka8hSBIG2xun+onK6qR0AO5/oyiIrzqcUJyVteT\nVKrLUZthAYYUm3PHS4Ar6iv70PnpDqYas9QXEho+/S+DeysHhOfE3rgtoSbs\nGLt/YfDxcV7G910hsC50o531fEPcz4ITl9jLJ17iERgG+P0rBmb1R/Uf8OAb\nnXv+JkS92TheMnMRN8U7b6FqVm/R8IyOa0wdLpIBl8fafCLzi4ew4zR12GoT\naAETzAp1VwbYF4EY2mOfcXD24H6dLdWmsSMfpLKIgQT/NZcfXAgejbgCitI2\n6MxPaeIgilTFZK/OZMaAe21OHZUIwj6yZUF0S6et6ugHe6ziZ+Z9jR5/jKtk\nNlZ9bGQ1kVrzGZnmXR05MRpC6lL/YDuq0nrLd8jS99y9crz/GjEIymAf72FC\nL4vX\r\n=RWJt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFu5yz7m1oj8nZAnzhjZOQijdevGm7mvYXWkYMrgvDRKAiEAoFWJ1O8cj4jvB9RUa+Q8/4tN8mLT/rpaIIxNHl5mcOU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.4dec04af.0_1585945787903_0.09208710917594476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-SRuM4Bejn6DG6Lbe8t3PfVBM0iQkeSAK1+FT6lUaPJyFgVITJHXrTvFkmM3LPS72ILEfWWTD15sW/3vRNSLTbw==","shasum":"532f5d4273053bacaf65334fcb24856187774526","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":55683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zQCRA9TVsSAnZWagAA8DYP/3Fm2uttoGFsZS+YZP08\ny3UcdJ8ifMBDhWegXyCpV8AIofavGoql+4sYNXvquGc27oDk7nQ87XXZilRU\n0qWmRwtaBlYvT4d0e8yCjmwYFmb6SvrAiS49Klg9BjkMVzflMsPJsQw52lJd\nb/FxQSGc1gyekzXDYWkpIFwPPx2Tl+LYX8dt6RBKOAzLkmkWCYeUa59cs+I+\nIxiJiGr8Mr7YSVnsNVjX+KexdqVJF1heASl9JF4VvlziuTY25nGa72PU9yYk\nMRgVEjTG52UkF3dWeeHW/QwUCabx9n9TtLl53FwGOO9jMtMJEi/JmMBi6XAe\nQlJl7VjdpJRQCCPhMD6S0co/xgJXWtH6t9GuM+ZpjbloCS9JtxJuur+hEDt7\ncE9CERlEEp9OVeMln5+yDmYBBiceaEJHeDMOWC4jSgrgxNY2p6QAdKM0Pykb\nbJOo8bsR3WIcuo2kK9CyYmjTVCQgMyP6SeenW6WseyVfiZnStC5BpMjKT4DZ\nodIMi8FVMu5qYADe/hEwuPkezJVGnhAg8PCRzwxwy/aMUC+l1QI7JNsSUwGJ\nAOqaG0La0ZojuyW6u7/z0LQa8A2mNW1cP+KtSFpg9vdVYO/6DKC+H7Sf7HFZ\nw1wgBWrK85H5YpEId6BQbCWp/Wa+SJMYxbapwIbjRYpN6uCWaenNhJAsadud\naxj9\r\n=NrDM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEWfm76sLiFFz2QxfIx5soLRRtU97QR5A/LekWp42KgAiEA7RicuaQnz3X0i8O81+WSQ1YZZlfsdLQLT/P4e4Vilo8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.9b676354.0_1585945808095_0.5489560915602456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sbKi5BjuIr6sqmI0kq0CliyvOsnTxk2xKMQTYqisQsUKpaNn7z/rv+NfnE+Lo47lJK2fTB0UZEyVQinpQ6VTKw==","shasum":"f4218f0549510986f145b3f043e2bfe7a6b17020","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":55683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6l8CRA9TVsSAnZWagAA2XEP/iFTThUMaXDC6eSlEkfB\nUrcBuMji6aty7kHb9y8BZBp6DOC38aGQfKuNOlBxwVXQfzCOPJ1Ih2qozPxT\naiksIS+r/7YJoPDPS+22TYY3pQUOU+9/wRhquZZHgTHTLMsdTSxCGnImNT6M\neihwFBuGl8DwHmXCaJTn3X0h2kjQXPS667KoM5SlGpoDTik+toOvv99rdhhn\nROBnXxs0MeVyy7n27c5YL36D5XTHRGzQdIe5cOYRQSlVprpU7Xv16rnUIoFM\n77rscqmg/sp8b26nyWgxQjxILYpLDyey0FhsfGOYzEV2r9D+n5Xc7KFrznQ5\nMFoPG389I6D+Uz3wVDsvm74ouLTwSOczaO8VXi31hqpb4MtytNDDHygs4HMn\nuNPQlkxn1mBnqsykp5Vm1jw0O77F6yPjXprlnjPID7kxIe2/A6YYisJOWzAy\nFoONDzW+VenOTqEqDwQmUtLhcX0anartggbaVLajtv65xNokWRJoHjh0Nl4G\nVbAxQ74ZM6u8DWtddwC/hV1mDVwJ+xhyhvAHDYQM+vfLpvzl1lOn12AS0+7j\nhs63lYuPoWor3MbGjZX4AMdOePfGehbpHWSQgE6P9TU5mQimaKJUw0JK8RT+\nlwsvikT4Vt/8cZtqTeGq5VZpoMUqWJa0tcqTZWOZg852OnYLBZoK10yjLhYX\nonaA\r\n=pKsi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoDVD9R029zLf3Lmqw8L2t59XDEd9UpiKp842unOdEoAiEAlGjLVSyZrVtGUjfHfms6GJboAVjARTSoZZcD/a3lf7M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.6b946095.0_1585949052198_0.7419641810392248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-thL04CPXCL8u8xdwdn0E2UIBIqOS8oRjcD+NpNmryowKQT8oyLMq7jI85cuCm+RMzi5f447H1jT9nIKaKAB/DA==","shasum":"abab633ec84c910379b5412a34920e55796e8b68","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rJCRA9TVsSAnZWagAAqqEQAJBVFoKyKdPKvAUe/TmH\nHJN4YhYmlY1QHWrVn9SNf6fRNLwqHF3eNBS/VaAfJNa6poyf+KyTZnDInNgC\nCD/ZITRSr9rN1+mfuuPVGP+88OJa4n2BlzQ2CRYocAQv41ixEEkbMkXHgned\nVmbudq24Jwr8+eXTWT3EAvErveKBuiHtKjCURlNdy1vidQqTy+QOCZsOy46v\nvXCxQWK/2LTgF5bupTjT68XUmos6tP9dCt82fTewnVd2nOPiw3aDGz45yTTY\ne+L3BybbtbpOb4+G/iBVpynZsy3qKTAhqmTqJCIDOyTmnKxP4B5pu9hPXqdg\nmBZNAXyhXP7nF1MoesCFHPULqmzB8MAdJMPtWBRVIxEkWaPlhKkRzs6t/Clv\nTnGZzAtUWF/zDdqpGhmM7LRogCD6KHpQvEKvT6thVniVHTT0EWkvLjj3xXqb\ncKGIaiQ+RhCy1B0qRoSQfg/vNY+9WKKtLr0xqdMtB8E5m6LdDkz6svF4AuZf\nJPObZc0Vy/u4X/pvj9lszHSZlhnzxAdttjcFXjhTpM9/HNmRorm+SBijESNf\nB5JQqa8VkOMm0YzETU0bbD5uBr46OLHcv2LsLMwdg3kJqatJwXu7vy1LRGxG\nQS1OdmUP2Tam7kahVvex24bwL2Ji899VvD9PIEq/1zEY1AU6hThMv0Sq03Wi\n4HSx\r\n=4D5n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6dKCy898quyDD6pXY0c74htyu/hROxN4FxOMhvmAKNgIhAKMZKs+hHXOk3yV8tUH2+Jaa15OI/uHwcdk60T2up0j1"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.5ccbfaa2.0_1585949385337_0.3985818527648495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9GUcWKbNa0AyfHPAGskheuJzu8lpoV9Ear8nn7BKjV4/WxVSUVzhQWK1bWKGzz8Sdp7186Kyhf+MRPqF0/kawg==","shasum":"4dd628638f3e45f49ab047865d87b683c9725051","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3YCRA9TVsSAnZWagAA1tEP/1d72jeRXT50+VAKkW7G\nghXrokf3nCN/jVTlQXW2pMghFes1nTh+ZnOK9VYKLPl3hYZDxgni6bK+BpBS\ndRyERJdsoQT4SqvADoC3O1lWfc4fkOrRUW1WHf3Rk7D5amzqfWoQOIoW/gIx\nMl78N0QpBlAQ9qT3/C2CIBIVry+ozbt578hmy/DWnLikBfw/tAtf6CPBkFic\nX4/8SqSZpw/j6zNjHe2VgjFslMng5U28qJ9nJuy9o8tlotR60SP7nD4I2bU4\ng6ztVhxHQrlj87SOHfMl5NiOU5H/CljseMg40kIfdaoKMFPUX5L92KNK3osM\nt5R/PPBIb6otm3mgOZwr3LAHs39mrKxFgDv7PDuxvfYPbxGhdtAiiv+nyAxM\nSxbxGBtajIQqE1SVFm7wTxz8Xd5nUuncWKWPCmHs2I/YKdZoONOODjazblSX\nrGVWzdN30wD9JDD5yeQzSreIlzYyYvYjRF0abWU49MEBqIXi4nI7Z1FVMYZw\neIBpnTqIT5oRgWlWfTtZ6DO/PGnE1XzaLtoiwTJ+CD44dD7bQXV9w0isQky/\n7ZBLaX0TVYQ4Eg/e1swy9Ll6NqkhLYjaUg38AOdLKNB7UdRf0YWMQAeQr+0I\nCKuJ7FF2GDNicVQbQxc/Sqw1yF+MfjsPhpV7zOE5G5/+UXeOB18BD/QMBV3/\n8ePg\r\n=dSjy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBAdeKFV8Si+WgnkdgW7TsX3yvtNDp1+TQOGCAEQoo5fAiEA0EDszm8SSg3VsDZ+W64RkB5rJfjBgIpbmfbNl8pwrb0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.a0ab8772.0_1586290135728_0.9010785283086857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-qO/qzWURCTrb1PVRa2Q3027Ze+vvrPP84z+A6pfBCBdyfXG7JE48MvJG9dEkqbknc7PSYo4+gzgvxn0ToUf57g==","shasum":"f188e6f7edf85ac8daab93b42ed11c2b3f0ce0de","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOwCRA9TVsSAnZWagAABGIP/RRt3Wz1anUV3u3RRAti\njMd1YWYyM/2Rhb2rErthp3e9qG6uPWo9v4DD/ohvWbsK+83tjl5FKTPx93ZS\nmxM0uqzxPXbUdWoxuR1FPUyl5WSLeq11iT/qPyGFxCYZKq0TlfI2gSPi1i4N\nrCT2JQNJhZ5afm6AWLzDbwd3R55t38ZQOnje0zw0JE4gA5k+HHyfyLWJ5C3/\nBh4RJM4Y3EMi5xkkc8GBELKfWETir3FW187hKd4SKaDpbJzIx/4BqSwdy8nA\n7D5jT4J3e0dZm0CJY0YwYaUq2NGrFsXBA62eusiacP8bxAr5kLjdEdolTw8+\nCimVpSlnngE9y1oHTtkbHCFG1ppBTMDXlF6xP8HFgcJzrmaVI4E07E5If59l\nX/KqENbTcIGm5PbnZNP8iO4RuisyBmRr0W7+k2DVtf/bDgO8l+hScVNdoUoz\nCDcCwrqBrRjL+hRN+g94jLohRgkj/XHu56xcsC6pXg7p5o/QW+aM+Y5jlXUm\nO5gFKVc2NVXBuTnlMjcfDg0ChJSa/pODFfwh7mmd1FlU0DBhIyh1Ki9oY3WQ\n3fKke7nvd4BGu1Mw1oRrqfNdCsqzb36ievlJdJ1xcdcEDelslbthLaJTfh73\nTMdwZMo29EKH73Ty+DBVCOHXBBDmyChZF/+Nl16OrInCN0hZO0nrIUaxndB5\nb9ct\r\n=Ddz6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtM9Hhjbhc1taSyEWM+5RU0Ih2VVRwzkEF4ylEOMmyowIgCK5wuDGextc0QetU0PFdVbB+3R04XXH509fdoXDi67A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.8d352305.0_1586295727845_0.15706194979742039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-irt+q2SUd8WcWKWFJqaRPQv3yNGDzU7wJUDah7vf5Gk4t7p658q6x00JtjKeBibV/HKx6WBYre7IWj1W44tmYA==","shasum":"92de00a5149cd5ef7ec9fb40c476a9ba1722104a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdKCRA9TVsSAnZWagAAguQP+wclK8/bQHJ1KpSPz3df\nSEAwtIdRVNoYrRkhiRmVqcq8BPDS1JKUhj+XJ86XUE5DagJ54asBWk3iL5Un\ntiHMAme6s7rAd2DWxCZdpdGlL/GyXA0TkIq1R71QcJodj6+9IDXkEiV+pHVI\nP9J83fh537v39P0EZ0pmfTdfSgt4hDYW8Lay+H2b8tuP9YWtkGdnyti26cV0\niTEKqoaAqTsqtAvEXURGmL+X1Lw9iiJxdbKfhSU3jrcE97v+UnOWgcXpQAY/\nzUps0zWaTsl7muyg2EPzbJD+/lHDxNlb/TByZMkMqbjcQLLxiSQnUX7m01uk\nskm+m395UNwV4nNe8/w1cy1GSvTySpoe3iIwP24M8BoFn2mjGbqeHAnfjiIO\n+Gx4zFeZT5BZiJMufxEmN8Zeq8qmfuhxH4e6uqFoT2Itf34LRtWIVH8Weq1P\nuPv1JChUWfk5GMOUr2LXaP6J6JPvzzDsdI279C20SAwkCFoIJQGyY/LBuSza\nAqExFfa7zuRcC74CYFzKMkbqc2Tb4K+6nyQO8aS2AVXewTKYS63ll5GC80ca\nJAJAp/9mWoIwk+qHrSPRjRdmTd56GtqvQJJ8x9NL6EycojplGKz3D1Y8YyDL\ngj9e2fu70ax5DcPKoeDEWr5owe3wdI0c1P+VCmZ3RJVUN9SBt3mR1lusqxec\nlF9G\r\n=UdhB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3OrWVW7YVeAJ9dkbnJ+7rQQ1N3NFF/ulHBHVvgChA8wIgB5WQpg153QBQgu73DoV9g3QynGXMaOckTG27AlB4460="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.31eac79f.0_1586296649747_0.292012851594722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-/zgK2BvwWtSrMMI1OyDnZ3yNGZEQCzfcjMMhiNJ/2ZdrHZPZEHgIhvats6COfwD44vTb0HlX+k+oDpj9AP9+uA==","shasum":"688b4793a7a90d4f3e00beff0454cdd8c7d50343","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgq0CRA9TVsSAnZWagAAi48P/0rTEOZ/+iQ2E7A4mE/g\nL0DC2rKHDdHzo4l9UlkC41UR0X61fE28lt2877YdROCzsjDc0BXO0AjxeXKH\nC3snng4uHbQrQRqAsLzkhUi4EXrN0KM06smmno35ZYE2Ba5GTuesBEKx+M8N\n3rVwpdfpql9LX0Z645YWsJxsjBdqSblSlXfDZs2Kcgd9bjVM4mu4throSqVv\naHsgEoLpYlKbbfICBTHpYKylb8fT7/BKl67MDc8K6reh80bIT6kPT79tLeBM\nXGCet7gkqwN1OwUkCUTMVApQgaYl/Y1GKCpeuXfbPh9ucW25W46JBrYm7lXH\noKi88CyOCoO34mG29ox7AuL4M6skHZ2RnZsOermWuh2setk3tmb6I0VRMyER\nnuRqM2ejmHMZPbhQCMXovyuORmzhl/hQfhS4PkW4MS8Noep4JpqCmDGJFJP5\ns4SKjrhQrum10JMlbFw/WMpZeEOKEVMAPTM+szHmiJD8Gf1dOnK8HoSTELAk\ngQ3MVhZekUitUVNbGYfo5q3J5U7qompO4rVWrWS7jW5X5tiuKYHye9R/3XQn\nCbVjsfRnuZnEn0l/Jqrr35H5i8mOqjgWdwXjdsyPQZhcH/CqkK311Hks/S3E\nhqL2PM7lCivHRa0yEkJ7anvRnMGSruR5MFLDZuLMCAS4BXLSUya5iluXdALj\nt3Bg\r\n=E24X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+Z/ty+kU8eL1PkZ8Z9vj7TOLpNRxqoaXb5kstBfJtMQIhAPShKjdWDFgzdzc4qIs1JA7S7iJOCAqnu4DYID2DkM7a"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.ba05565e.0_1586367156209_0.7143287239922567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-gl9J4o92Ltgu99xsCmozVjLws9ZvAJucxVmIoo8/WnybNCxZhGF5B3ergpQ2va2lvjtXnOk+hAj0ZuMjO/pI6g==","shasum":"1ddd419305b0ffbfb8e60886ec538bfbfb84832b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKFCRA9TVsSAnZWagAAd+IP+QDZu3fgKbQReERBCekU\nrKLTM24IB6oDxLM6Ah/2zx+GgPjyOszVGzP46BjwCw5KeLg6967pfHRz722a\nckmRAy+sB1g6XglJU0FbAiU38yBHLhSog3rgxGVodAPYCCOvSTzzmCt+kdlQ\n3xqC/+AmSw9TA4HgIRg7JuEMME594q9G4C2H6YK38VnszwcRdzIZkQXX7VhJ\nm7J7Gj85jvK1cqzh6mNAP9XviBgtBjlZ+uD//wKaPryUeRtJL4haq285oMss\nSrfoS1PhxjOGc3ftdX9P1El/1H0k0kHp2mbkEUvsofUFiALLJRQ0WXemZrjs\n35duHBe2lDGVeFQiKHDlDBfNTk+2sc1BUrpvbtftgbNyluh0gN0QMyK5ZFt+\nzFYArPsfgDihgVdQhSgN93TVdbuXuZ7sOZ1YH1duTFBHsxjIRMPwnEGxQxs3\nmvbDZ+Ka43xtWHR1HBCfUQuszQghpItzmjjOt1Nlx9Z4XizlFs8X0JY7WAsC\nbxAV0mxgja0Arz3BpOSWyYUNQ/8HvLTRK9BAU+eRTgxhsLZqNKZ04UifRrdk\ncfcxaOs2WnWB3JOe0EevY2s747zJt6poDqBfy/+CqInR0iyEW8CnUeHRRHLh\nEEiCKjMnjY/Lgz46C31wPxOR+RkGAb2OGuPEEbFh1N4e/xWryTWyb7CudE/1\nda9V\r\n=4f2R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEwx7Ng3ICTQ1Yzai4Yc8VTTXJD9TqSscp7AbWuNuHrgIhAPFI9l8ukB5XuSb0myyvJ8q409DBe3NWlU51pt4uARYi"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.25099f79.0_1586381444566_0.8548681214968696"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-x1uS9drGptAFVGhzM/NJr7BM4z0UPe/Ba/+S9zdpvRDoh9A6bTebqmfVTiYeovGotkWUJH+RwcktJtMxlu5B4g==","shasum":"8e847cfe58e760f7456dce9397ede451a7424c1a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndzCRA9TVsSAnZWagAAFyEP/jJmBn9v3f4ZEIJcrUJp\nMntXY1VvOV+cHLBxpzM1szDtceHbVckFWRs3hr8GtOSCDGU2bLAml66pjsvM\nlY/ce0SpxI5zE6KlinSsr2AsWRMNz9CTfZLVNptpkU0CpdoAD73OhP9P9TUc\nwNQoK935CEVtawo27qzMqRoZz+VRaB5VebLZ1nrJ85ID45ZDGRjF08pnzM4v\n+ZgZlpJrhDZfIvYZAPcl80ZcFkAaCfJgFXvsR94qPhfZVoB5s9PSEhsuWxR9\nLd2bGlg4daZoRTgakXCXvnF7B4K9YMx7fFAdVVlpw6Our27aNej5h4gGmqaI\nlEkLWWzpJCy6q/WlMcooj16D64cQ8NKZkGeEZkycZKhFscsnHk/VLGP3RAmG\nVVBOhPqupoOnUsSViaZBg5Q8A0E97Pb1J4dkKWh8BBa1zAJsQ0GpSb7g2mTU\nNOUIRT4xCnNnNgNe/YyCewrGwxb2QUINKR2y6BkmGExbL2hbXJ5BuEznD+ry\nGjiQrOqkbr88MDn+CYoXzeCMQEZzUkQBBw8irjqIDIeMuEHsNOVIcO8+/y1x\nXoYEljGQbrYApIyWspGGaTkFAG+E7vq10g4NoLfuBhAXfXLPyMReXqKijtS1\nbL5SukfEK43LgVtEn8M3pNsm80OKdRKypkDmJM5QfKwF+UGzkjgJZ9NFjDEt\nBHss\r\n=MNIi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB+ytHO8SxlEhbQdneLH02xQ1t8IO/olWZD9E0HlgjJwIgawyt1WZgxyQdLZJc/ip8QxDUph66pPxzWzwp0A4ZX5c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.447e31c6.0_1586394995381_0.7449428929218673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-ZjPNmsR0SkcDkwi3Ya44Xn/pGAyIVKovsiN6bEKGjUxB9w8KEGA3tIi987fiV3/mptmMQ0oDWdkwXlc93DwvXg==","shasum":"6604fde271f2170fd1aef089dc81f6a6f9994dd3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnl6CRA9TVsSAnZWagAA2l0P/iJYvipREX+sbaXb9rXQ\n5vq7ZvbjioFR9t2a77a8zxfTXesKlsqsB070TWhcmCCgJIkwFqoKXo2fcQ68\nqN3BOVS6+qh+HsQ6lozsc6iJSZsFq0nxjfLk2GKotN2rC6dpQFYPyvkwBbrh\nGW3EgfaF5AxMaWoCbGFynHbMAeYDTO4p1/awuHRNgRa96aU8ZO26UM1a7n6J\njviM9GtIf0E0DG3LnYjCgn4wtycZE9EdaNezu7VAk9AwyuldyLW7nGV1lcQn\nJigyPXkvbXPk+PoMGkM/0Ruor68Ea13nbhc3pp1sIRML5+U7qR5RWG0F9cjc\n0EIYzKmp5fFfpLIQmboZV7HUC3/qPCIprhiAPwrT7PCnAU059slMEL98e4e2\n9+C0F5O44eRnj/hI2aKWLdZHVj+OskjXGl/LCKge+5PhLZ3/otKJx8bqYkYK\nnHBIpwCJKnuRrA4NmRR0YHaJwOi3G2bodKldi9ByMt63HBx6rjsK15Qw7VKT\nVIs2b4Swpb1M1viFWPQPDADhNwyJjAa3k2Pn5flg3Eyb7XdJsrJA1r6cu24q\nlqoD2gGbnDJMUYMuGM5lGh63R6dmt+oi+cLpeE1SAYd3ZhUXJxPls1zm6z3j\n0iyeJwAKRKxM3LlIPfeT1uYg0dSmMbhpa50szBBkWLqhjbM83WrAijs2uZMu\nTkzX\r\n=NIaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbr0kUWe4SBht4G1jXfjLbI8Az/yU5seN2gMMWBtR5jgIgX4dmaXLTyfNgNUhYaFiAn2d3BJi9boZk10wnFp5rqs4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.d6dd84f7.0_1586395514127_0.29271877902740795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-faHD9Wr2DY6HGNyYHDM42Fpp8d+Z4eq+xwEroX3WEykHjaVkuqcmDDUxXP9O+eKuMzs1+nTcOhhQVRs/S4cywQ==","shasum":"a6431504175de371042bbd726038e5a3e86c59d7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39xCRA9TVsSAnZWagAArLsP/1ihBDoca3YPS7DK6ptW\nmfg4r/RBCI6JJOQmnsCz/RKYppxrVZLXZ19KslizNeftsqaaYDYGi1ebauEh\n5uYLGg8NIJsGRa8uPDf2Gdl5hSj9/FH+kh38DxtI+7M1CsqmhM6EESS3RY7A\n82QMPt93o8RXWF7syahXy3dYdEFDCxBhnQ8xa292lJJgSpG/nPETFkVc9GPv\netbFkGIfyvionee670Ib3i2Sib/euFjbR2uh7Tq2e6Em3rYHnVLllUZZELpN\nhA3WSBC5LkqpIPE6yeRjWpu3d5/nhwNe7pnha/Lp45y7u9J4BvCerF4hodlQ\nocc+KOsyNvIiGRykoi8LHMub/A9nHeFgZuncH1TCz1F5cOsw8MTJZ2Sv6xiV\nrYM1XLMdD2U5QNzN6vNULIJSIFNxpY0WP0pCW+lwthCfUMFQAAgvvJV451D3\nMc4yLqx6O+1+JqKD0/O3jCI/flNG3hlevu6GBM1k8UkeI+jCGq0RAEwZwAZV\n+SRnwEobLaSLnndrH9bXGfgrYR/BESMdOCP/9vprwgDlxsmYypwdcIpw/zzB\n+EKvHDa6pgBvUdm7dfQ6e/laedQNZdv0bRlsBWer1vlEOrG4GWbW96jm2QTO\nGwIhyTYCi8pX51sVyv39O8Ia1OagmeP2+Jt3KFUEPboTGbPjMaC/B4Nz/rdl\nlLQi\r\n=J8DS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaqWD/U3STh4QVnWohekUnDoVhGhwVDeUPP3zjoXDXrwIhANETmIs67pp/hB9j4omWmpE8h3M0/ycAvY55fQiIoniz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.9b03ee68.0_1586462576777_0.6477778183915108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-+dS/b/JJJT3FpxGjLiCuaSmXDPLPCMmoXR03V5GJasfY+MPcPC28aQBwUDr7n+iRy5ucgQq+JpyYCTaUaYznrg==","shasum":"5aaef8d5b1a45e40f29bb291b59897e9ec4c15e1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcWCRA9TVsSAnZWagAANikP+gP3eRRK67UYMcXXjC/C\nUohXHVM6kOjDzBHQae06iiFPk9ZG7wIbsm9fZZNA/GNus7btYtNwLjLxL6NR\nQKvPVzC2oz/mtZp/ZQ+NpBOW//tREMap+SnUamep6z44wNyHpF6wIx1EAYjO\nu2v/GkM+721d8BlQ8a05I1Nc85fpvpZKRpw6yRPnxTyg7yJJU6P2zZh6y4cz\n0JIjQfJGu7r1ff7vVLuCZNdAX/H8sk9PCdTh9XX45vLCwtuJy3vdjoRCFMWT\nU1xYa1OnHXdDdIT+PbAmzKon7LeFmf92hS9ZdzXsgFw2jRBOCTKHFEIma6Hs\nk8Ekk6rx0IjENCVpuzWrb+Xh7s7bvSp984KR3mBFGSYlDNKwy58MmhSxvhsu\nokwkBlhzvK9jfMHZdhDPFtELNAxBFa5Lkwa4DoZGVR/3slSHoczkyi4mwae8\nYLYYgPefbs93uzr33xV7NA6/WdTANO7m6T+UEGH3O+3Cwa3OHkarRPjUzAYH\n4gNDjNBcwcTUOo3aQumOE+J/9bNqmmwPADkD/hvHykZOYHLX97P9lVaSkauS\n/v9CgX8+rxOPGI8UXaZSnKSybaEzv3/iS+CGoj9rcPfQWORdpSCOAHOKpwTG\nTB/8SqbuR2GSFadc1S4DdPwe6H6GGaH3MVaHjpE7kIIiH2IL0cIF7+aW8Nak\nQWfE\r\n=uHEk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDmWAA0jQMJ3jkrBQhmaqnUEZEeWOOqOe1uZtLvCyvLQIgCxw9KwqRoV7vFd6+Vd75Iv41sRv4RHSRnDKgEB/Yc7g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.bbc25b10.0_1586558742046_0.425295542158193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uz5zPrKvi60ZKu1CJtbmcnYTj3KZq7wEXCJ499s3yQXXdge1p39919iMIG2pZtROPLceugXI2uicHHZaZ3JHTA==","shasum":"bb59dfaf757a69b95b3deb61349a243cb4dfdc2d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0amCRA9TVsSAnZWagAAkpIQAIpe/HBIgoCFmMoRR47j\ngHJZOWn3avBK7MrUDqDJQajsE7knufw7EFU//hediUbpJFRaZLqxe9wQFlGn\nkqodVYvndQ0TAlCQ6swWSG+9adBqh/XMUTrhumoASjGN1+I0dxpJ3kUVB2ky\nzNLLAJoDtdbjMyRkJr0juyY9hZ9ucO6IgcCUDP/8lJk+HmxE2ajEZzf9x7Yr\nVNiUYfFn54ua0BsvKTh/EH3meraZkmg/STpAnLJdxQ8XeQ1FLBzlUdVtyPYC\nl8srkC1jJBzm77cMaXMsjnaTaP4C8gU7DDXhe6oq2kKznBsiPyvI/wS8zMx1\n2HenteTn063i1k/SL+beH0NoBhPQ7w1+fgTkHb9j7VadORC+dXihyeiTQ5vO\nOV09sNf/gc12A69YCQ1AdpMp5sQHZDBfVEwsf3HBWhILRlj4h6AeJB5VYXjn\nHfy7OmzFljrE30X/7rZRRpuZiOVBta7oX4JkNQa/SL7KKXE/AklhVVR5Q+I1\nFnj4GAXJLMQQBo6BfiGAq9RNw60H4tS3eArAR1plig5Ze9cTisKGX6KR3p7n\nOILGYwKeiYWmuQ3pvBThhi8Zcd7AKtEUycN3NsAvDTveKGZmq5jEFiy09TeK\nUrrW7VeQWi09t4P46It316KOXVwtC77BRixc5AdrEr1qy9vldTfiRZLq+prY\nBpWx\r\n=u3QV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9QRWqbLJHSL5ubx3JcuTzoI/jvRG4Fv1+VbFRHBxLKAiBsOrmIQZnkjVV8yhpzCJI+dwxcxQ1bfkLlfTJDMcERqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.339cbfd4.0_1586972326321_0.8219438562219354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-33XLGez+UkFFFP0Tg1PXjAYTp6hiGTc5A1HuswDQi5WuRKyhVgvtiymd4YiqDwxEzP/1h5V1oRGtcnN23cIHaA==","shasum":"173d062d5a83720e0f48d76aa63f091234000d06","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jICRA9TVsSAnZWagAAftkP/0BG4egsnX/5Fd2x7BiP\nUl2z91W9DCDKhIgVPWHlM/Al0yjO8JGF19vSx0yYRxRAurmZNsEWZyNF/bZG\nZDMviBZOmoLgN/WVcNOvnNJeC0ySBShuEqJjCnKFOZCOBndb7IJLIJrrWzW7\nTyU6ZRG20VJ2yfAgcdPkt/oFiVIo6gXVIhDtGMEKCeg6SoAxDwvqfDu5Dlcl\n7lKZm8EqZ6TmnH6/tC9cHDR8z31T0dbNz9ulGaL+NHATU4a6pUwkNP3qvt+y\nfMNiwPhdPSD+FLqq1jXEHl8OUf7xKLq+3C1yFmVePkixl9tnCfVOfmUngDCG\n3cag6zAcYBmHds80qr0QUbt5CuZD+6lGDRefGX2f3Ub36AmyPmITkWm/8PW9\ntM3mJ69xfDQtdj6/In9V86WEPJBrRjDpDYXe7u/XFn+6vSsOJ/W2k8gZzRA/\nhbW9xDFMeVmkUlWvsXPb2stHgsSm6BkIuFQhfzzNfD1pHjFIEWJYXU7r4faX\nJtoLx+PkqxRsA/kawQuT1mkOKoKUzpPHAa3aJGCIYPoVRA3qqBdPYs8XnY4y\nPkIQPFkTRxzVKboLOYnk0of29lYOPJQKpVP9vbwGplqb+3s403dIfXGR/j1C\nO0susyHcOXFj+5Do1/Q7TorbsxIjtPsB7yVSPbxPqxYyPiBD3aGsHRranmL4\nDjle\r\n=SPEW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDIejyLT1S5U8Ap/gra0aAmguJnM96drN0M56o8pRrRUAiAwj38sbrTKoCDYcOulb4wyDGQO+7/rsVIFJlOgIsAOhg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.b74ff19f.0_1586981063765_0.5509359029423135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YXCmsXDmPmDwJVg3YU24hnErQStA3Hae6jU/0TirpHzyfAh52Y2YcL4nTWU4Rw0s061qPtpFAy6VYrM0qpyjog==","shasum":"88c30d83bbcfd6a56d8af5d4b7aa56b265b303f9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42CCRA9TVsSAnZWagAAWZUP/if2+JJkIncXdAUX8ONT\nY3ze8+ANy+rjHgo6dxUCwLe6qoYfGFoLbb3Xtughj4ECisFOQX329xFw2UaX\ndlowRLW5Yg9bQYx3IrilNvRjsBUH1RpzabV7zQnY+HcWra4ViLPB5Hmj6R2O\nqNfaY06MyqsjahhevbyyXGji+CqdHzZDXu/Z0eOkiiH3XSL5M6Wpna42Ieku\n9/xN8wewOxSZiXL7/1LeHf8CLm6ke5JqG/ZIQnrptaxhycn61LSSY+d7dTlT\nl5R1qyX/vc/RMgFALCQJgY7Bvng4Uy4HlO1xHUm/jEFdUhXLMQ/nf9BQSWPM\nS5G+ltau9IqOnT7thpuAwNOdEVJEChRqBTL80e72GnpkKXfQGP1GlBQ1D7T5\nhG4ImeB5QaYWgmUo96rt9nzQ5QEGkx4qdI6FTxCfIyqa5vd20bjXRdgaDLHq\nIR9xse4Or/ID5g708z/mI+wr8JR288OkweIinShjVnq+3RicTMYpznWXMV8o\nTUadwd5Bw0tTD71xyxlXiBq5avpUAxU+nGZ1bD5ZVq9YR0Zhaw35tazxIgk8\n34tWLSwNSeN1n1udoVCpH13ssRQCLsjtljIZjsFJP7sOxHbAPFNLqE2svU00\nKdmkOmCLpTVGyxWd4MpwBGzCL3A1mgYMRn9YM4cYmkSFq0ZAO+y4DluoBbqC\nv5tg\r\n=iEEY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlqPXr9EM+buMB2d/fRG5dempE4O2IIaXrN0OCg2ubHQIgCeh+pHtQk32dlL/rJJLrz+zsaM/+lbS65NFJqTRq/sU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.aaa16853.0_1586990465576_0.8225413265751516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7v93niB0worsge+c/8dzaJgX8V6Hkw5YlkS/gs3sUpifdoo4EvtAoWKc0fVUItEpOY2cGiQj/pzANAsBamSJZA==","shasum":"78ea87bdc2def27a4ebe363529e9978e6152f5dd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqCCRA9TVsSAnZWagAAybwP/Apb5/iJwt/Rql6sn57m\nLh7t82aNEg+85EaXuz6SFt2KKYrxln+zVHNo2ozeeW3rS/fHlTPtk2/PD3dn\nGe2Q05Ufn2P17qAxQVxvLruijkfh9tVW60Z7NMreaorMtdqJWf1qSQzEh79+\n4PqYE5JsSZUOpZiaTYI0jaS096DQFbXLsQhGVlEuUfssPie3Py8eOOB+M9Yo\nZILgiFWG1IFWWvYYQcUsrFunF9sGhP6+r2r64yNgMSWCFYoDWkdXW1kA5C05\nzHTnuLwuymsfr5cbh1NoZle7jKQtZqqvuIlRQDjE0yo2mZQ+ajUaiEy45K8w\nUL9AuWeWR9sqPf0e55eUGsqmA/eQ+fSLRa3RqR3fmKjyZCosaWM3FFo0t9r3\nClAkUBeQkYKoPwODl0wAgxYtfjSXldLhGscl/LC4M+I3SCLYzRDx6uEwuP+N\ncKMFeQcspWS5GCvH3zr+veF3hFLmi0/yLEsS/1HCrv9TpmcDjjIRlcQvN3u2\nUoM9nI7F3CHOK3CkCpTk29y/D9R9xO76F+3yb/ULTLoww+6Eo8KdDj6V1BET\nhgR4kQHps7qsCuJa6fmZufFA1PYFDyJtON+aTM0SKEXvi5mBZ0fhPcp+Gt08\nrHBi0nZ+Rv2gMlJkFcYstPkNA3rjqa4KRCC8WhsBpLeIm8oiv4Bi6zqlMAFr\nLpB/\r\n=gp3w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ0hg2GcoVz9ufAXFqEPY0rtM02TGxkQmPTaVC+S8uJAIhAKNrDhft5fbiJPw8x94c0qia/ovKAALVmrdHOrU7yOZr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.826b23e7.0_1587063426284_0.10091743297542477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4hZwxTm/es+MluzApiMoIGcs88wjMmT1B6xQvaUInSK9IxvbVV0TcW5cYRd8Rm0sIlh95Bn8K4Cw+MsXFuVPEg==","shasum":"2b02766ef4d2e62e6905ae628777ac19fb1eed75","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVNCRA9TVsSAnZWagAAxAsP/1cXp+kcgiXi6swehxCq\nOMmDLhttlUasdyp1/URudaXYKNI2YwgRQbKtIuht5bUkLFL80rqqiLBZsU/P\nip9HwfBetcTP4NEqBiTkR2sX5b1flcLsxMfy23Ir+y1UAURhtotM8dPTGeLE\no3Kg+pzGgCxB9ylKgBt60yTvm6orVbOOR0TL0azKKpVFtuZou398FSHgjGvY\n8l60sWoyPkfemrh7JLIe/lud4g1bJPRXhBfPVnOJVffEcCS7cY/0CRC1r+9a\naqfzGZ13leuxauPiAsX/8ucfJoUwm0/Rt84ekQkOMEpl/TTwWrRhg9vFUzzS\nionKXUzKDyJtY4XXH6kyNfJEnoF5pw0ugY8pFPEKcR9m01HB6i70k/uDqMOY\nenO9TQrl+DnPlzwsoUgM7IVXB3pU3NBb2b/dodkMoHb5HPHzP+EUoRO26D/f\nxnMH4h1L4lHZaBSt+rnwM1ScDecLBFR0nFhY0kdOkkDPMPGJxfqFv1+n7cfJ\nQN/XvDDnrA5PjCSBG13nIcyj0UJNAj874gtRc9dAUZCXvdjxKb+5BgdBCAEe\nmQz+F61rr1HuYXxIkLKSkSRgtRRcR+Z5Qax2/pmhgQZ8NmraxRHi8C23vGKp\n8hDPEHDle3nPkI9559FOfzjPdPD7XUye7i/jFYIVuDZs2KmJZWaZVd4V38Cs\nuCTz\r\n=2KCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFYym+QMwT+oxu0uanw4UWGwQpbHdZ591W7lytISHqEgIgE2XGbVu1q2XxxJR+b8d4233XgqFu95loYoK8u07e7Go="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.e1ad2b2f.0_1587164492810_0.6297492391272739"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-J5yL64EYr36fVQahm7wkVDtwT2kCBphDdbLYIULp/14PMXh1ZinyCAHj6c/NL6cUqVHqw89xQGfMUuNRy6v+0w==","shasum":"cc5ae5c5292489058c919387cc39e3b4ec762b17","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjl4CRA9TVsSAnZWagAAfxYP/0T8eEaZngKH0VArFgNR\nREKxYhEM2HMke3Db8mlkn1JPOU+sLB8sKpxivOuLvdbfl5qORyKXOO6H8DIK\nbKOP/oA3i9of2YqH+rqfIsnwPdpyvR5RTkFi+PJoNFIOzGtXXumynb/r2rOx\n/Fqm6SRu8j4mjSy0n/TwJugL1S9lZyBoLeoLm08FZchVOMQKsb9vbyZQjXEk\nXDRKrw7259VrurLuSRTc3mKiKLfKUc/GPIPnh6AJm5sKApVR5smKJJh828wa\n5lKCQQx1XVDBUxkD+FBexorLn7M2PGRpHurHQxMnTpkd4E80u6Snk/el+gb5\n9WM6XOJa+hNc65WzlWvqgsFUQBCUTrQduz2lo0j7zYFp4dygh+VSER9XY0vw\nhcTZQCK+daX2wAq+LjM5MsrUFlAHx+JL0Fu+lAQXZvpUBh2UZUOaOE7mQtQe\n4AhBc7BUCtxHuYv8ebpa0RnOsUQIObHHVhiaKIWuwiSyaTLE+A0Voa7aFww7\ngnedgvV/0QDE5/jCUiqglFja05sV6kyw3WKKbal4DlyA2hl6n9tqQkuenHN6\nd8e+UHQZhCoZ+30y/kmYkiVZ6RY+rsddCWSSTKO5aUZS4obSOOdeKfK7O8Jl\nHIa/iSPS6RMnh1uMGOp5g/2d+YxkqKugqUnCxt5ux1ZbPYvNf8JHy+5jj+UC\nA5nd\r\n=mKAy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBEQnNVheT+qeL6V3+GB2j6dWPigC7spvE44o0r1xzLgIhAPJmXxej7gVr7aMzMSj43F9HAOScVdpjojxBxr6pJWqy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.bade5580.0_1587165560475_0.6539293212048258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gGYK7/eTaCBpJscbNS3WmLevVrQsuVxnzGGqkLGRQkjCYH/5KbQp+LFN4r20h/Febv6pkUIPbjqG0+b3JggbZw==","shasum":"e599f0be367f689349598b08928539976daebfb7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbPCRA9TVsSAnZWagAAG4AP/Ajv4YZn5K6hnzKQuQp6\n++k07lEkDIciGLfa8emqOVT5innpQ7NTGjFCGgiQa6Bau+KQ1Z3b96GhGfjR\ngu1zhg1dVHJTJd+KspdkRgV90qufxOt+ZN6Vh4jhzc1ICE/OjlyI8favd6xT\nd5kyatkXJ59uxlJeQbHdzDmRX8tLTX/2EKP5ey3njnVc5DlK47Klut2lDAVs\n94afEVdZ8cq2fuEI8/y0NKx5/usUrvSSiyREw7d0845Y1IiqeH3in3deMU7r\nodqh6JzqW+kbq8gE4eK9GpFLbwvCLtNma14RTLCPq4JLkY8QE3wczSISVTpQ\n/OUbi9a+72PqVAAMynFXn8wc/ZFC2SLStzngFkH79DR7eySTosFbixuaVVXj\nCvwIaz9CKUPiTc+f+8wffcsK361JA3z206Y3wPmHxT67lIN8aOalaA9rkrmT\n+sFLB6DxvJaSFDenWCa5sRYgpe+7ssyLmqkBhBMQ1EnkpqcbVH+ii+8BQ4Sa\neTf0ZNERdd4dETaH9ThKpr+mS59K9lgFCvieVgsrOuk6Tu0E/3AtZUv/+5oM\nNT0HXmyl6Y4BO6ib9UbcPbne6T8c9zf4HkuJCFaaxxeUmXG5lbJavUHJtpKI\nIzpj0EcND+iYA1ehtl9LuBzzIZGFgFB6RmfvSMbF8OJmDXWcIudt6J52IZI6\nISqI\r\n=+6tO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAH6RI10s8bHsFilUL4GGzwtTxoEFtkynWyP2nf3fA0EAiBhllEecU2RYhwcUpjMSE7yD4mduBfNTL10iUIgqt/+8g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.dae38247.0_1587168975187_0.8034392136664217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uEohtFCY4klIplKsJci8trFLj/MX68K7OVVwLb/1ovf7jPinCi2Oqs7xFDmVHGyJe722WJF1SlRZjKTtvR2KFw==","shasum":"6d60f49f6aa9596c79c2410f8a4fd8b6534f1dd1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksPCRA9TVsSAnZWagAAB+QP/3/ldtN2L9fBaLQi9riH\n8D57QiG0Y9LAwjyZfjlbvFWQyUxlO0iNnZv/tuP5Zev51LVrjHy1ImyMIoWI\nRnK6DCa91HDedTM0EimnuBqzSc8D5P59DzSYoHzdv3vodcnlFqORjRex6VE+\nq7f5n/mquATZdlse+bPVBHz9PTTsIsIkh77WPbEvshkeCSf2evip3mu2Qdzx\nFnGbbAEnCx7Zpp0IIoZj2tRBtmIJ5wsGBhQk8T2etF/Q7iiCPJ4Sv99yQfiD\nIEM8fsIvJOfgKEnYcI07PU5mXQviCVwR54+fPUGq0nCYUfhkHCylCov2g9vG\nDteBJF4BNRmwlX3spLGk6vG914JG8m36IDEmeMCOGRYq2j/sOELYdCyOpqO2\nWMZCIzOwsiA1nm/vADlI7ktMpDFRMlSw5IGcxUoMfGqsjKSkCi4YdxreuqHL\n2AkG7ASRby+/MT+WOOm5MUtzZo99ZL8mRJHtWohZSlDK9F0AowdofXcl5pyL\nP4g6/BV6wzOxF+JPcF9VLwlFwgfFF+H3V2v/0CfM0DP8J4rqM1cS7p197bIx\nfYb+HqbE5T0bB3f5cdm3Y70zl/5eoUdMI+mlKslfFe6ELS/qLrSskQOf4F1U\nEUNB4RZSfAICLU1Vkj371KP8IgO62NCenPwMO9u7mRKkiXDt2JbzNXC2ECU2\nLJmG\r\n=H6oQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxv8WOXdTY7sI8ZM/LOZQLDLHD5mAj37/krZYTlDpGSgIhAJSasi4dzL76Qefpk08t8gaQ78O37jM/p12d4I4t5rxz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.a04c0b82.0_1587170062366_0.3157336769418615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hxuOi1sU4lpKBgFmD/kZchZvKCmPwEXlmt420ZxvuYwJgfnTq/Y1fHshr6p92OoU+SQP0SOnLztDCL3J4nXo3Q==","shasum":"2ae94a7e53d4cac68a84e77ac453649a8c253563","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetpCRA9TVsSAnZWagAA4lUQAKO7TYzAQ4I6h9fGKftG\nz1tJaNFaCZgrHktCU1tpQSFS19A5lO5RVyVXLFYGt/Zb9E1vfRKBUZ2GddOI\nFDAZOWAHm+FeocnM/uugcH0rBATTtbytTUFccB2koCb/HAnA7S05UEXKtfMv\nGIhrrR5UKa/AP/Yrmbd5APUYnGkFYF7iYYbCDn4kZi9QiRZ59cSe8Ftfea34\ngcFANooW8czBgmz+UfT0snFouYEy7JfmuabNFlxdFRSet1AKm/71nCtG6qRU\nMrv69No5yzviHLTLqLVeJrsijHdSm+MTKHzx42nctWrutUan7KCRHGJTrQEX\nWTsRf9XzHsW4Q83PhfUyhOVr4dvc8RPOeGU6GAnm4fBsxhC25J69vCLqMFAl\nuTldR2ocBixC7PAol5qAd2RJgqlmP/fOD5WyAx1xQ5lEqtHLfYW3QOtsUoF2\nMZ/Y5Lp/NAk6ZoxR9SiarTvApyHds/SL7TT5zgEiBuHLB5ZxoFr2SbaEt3BG\nnwmvChu8wwLFhcWc33WS9HlXmKaTDQBJ2NspUfMVuwj7Pv0QLDBemWNg/7XN\nfw/+KuaAkThMk/ay+e9pO2bHSrGDinjn2nDjR/9vj0O2FVVB+/FSDxvXP9Wz\nK0CEcMgOLTf7QTNE07ZAFt8HNwi6TDiRfTxyQE6nD41Gn+h30zbfJfY9zzVv\n8fJ9\r\n=++RV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBvXsqlnx+0iaxsRv2POhZ3tQpc3og5HsNCg/SPtQDjzAiA1zu+3wsGTxi/I4uNgSUCBmL533FW6kmv7FbZNDPEkLA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.715decfe.0_1587407720977_0.4094809747244925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-275mt2o/IMCaVv7Xo6q6roLnhxLsNrBd/wvs+i+ks9VPZ5QWY1+ZajM7NxPlKOxdZKfvGEdscuIJX8aryUNc+Q==","shasum":"c85c6d81fec643fb9116eee3959d8ce1da34dfe5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":55685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVTCRA9TVsSAnZWagAAPdwP/2mY0i0oFXa17YlSviey\nUPls2/OjBD1JavwSPcFzA9XclMJDdY2l2DDS/HOYK7qS3XYNlAFOYQuhGGBL\nFRECQIBuwMNkmGZ8AkJlF/WgZz1XrPiaWkVJ5Ljm3KxPsNtz0mJgDhUBzost\ng5YuBS9bQsveYYea0B4R0Xyl8VWQZGe5UFNwCrlhlRqtHGNuoQ3TRIQtuFKe\nxisxh8FeoXRqxQO1ehNr6+FIl2RqQ3803Y2d0YvrEfp4LK2O1nf0MDcLHT50\nt6Z8dmZuq39UQDhL61+NVYHzuZzevE32EM5b3gJjbgMNnmbrSPJt2VznPTZa\n9Y5aMvQswJCx7133MpHvRJbLaQi/DGQ6BF1IMzSFfap+NVNUIN0pqEkwm5pE\nQxWmbzJtrqJKM/XnBs5jqrHh/Exf0riN4vDHGPsvqOdUfETQZ321M0+XFVWw\nen8PU4wCsLR0fDAdo5P8Ih1gqlLFJR346rg/NwYQJ10c7oIUicJ+oa5pxxsN\ntKx1sLCmHBcHA15hJs46LzL6io1Ryp2Dg5fAScaeSksm9ZBJCV6u20uOOepB\nm81xsG+in0HcFr3dYkk0v6+G1oU7ie2pyH3iQHnLoDbe/qmVEgcX8knsps6P\nsgvabTQHyb710hqmJgXjJErQjWUuBGvHUmWVF93D4n3UTNKLN6YLDDB4RL1D\nebx/\r\n=XerU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+MZQqW5zPbwn8Oj/5cqHfXzS4givNgf1+ji1GfcZaoAiEAgRrZ5ygJgAUr+KcAzCamYoLUWIGMcF6i63ZcvkvgRlc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.c862cd04.0_1587418450623_0.6661800916256473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-sW0txu+Ko/VfJQ7YJI2mCCVpwSfej79gBTujuMrfQYKhXH35RMeOIP6F/+hiuY5KVphiWfBlYYdx9hIRBbQ9lQ==","shasum":"23d081cb1b6a48ca573d16c75c6b6bd7f1477242","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":55716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBaCRA9TVsSAnZWagAA/b4P/RVeXyWIQROMXSHeMkZT\nnqB++vf++dBCCJBFi0AQ/HWYigSFUZZpCzQ1ljOWTc9WZqx6D0Jxvs07TT7p\nGCR36yvZ5/hF5H5JYUAorOCxDjezl2Tg+BdymGC8L8MBs+QM4V1qNlF3ZR9+\nMEDqtXLhML5gBPXyxk1BwtxZz30IMA2MW2HcsqRdK3ssSKdJxMfDhxduSvqb\ndf6LXRrkdJNLiy0VoAuPwylCzxVjauCf5lhRvz/UUbjDVcsFtACms/ks5JjD\n77DJvjr1o+AyuIBu65U6kbOqv3UoRxYMAUOrQVsgmJQPL9yxleEZ1EAc18mH\nxaegnzVM6CKVi7J0jSWf3F3z5Amo9eb4t420l8/fVZvbpQ2tslFPaSIpNcir\ntBnkcV0B+lX7yRMbpcuObgm9Jf9rPLDV/rp8z0nsfVe4+qhHxiqOtSARvXQz\n5/W9a4kRoSbZNFRSeJOunyUNAxR7Jxmd0i8zBi8w8+9ELs2CQRWH/Pu83N5z\nGiWwTQfJKsC0NLyFaK//QCa4WTkLHnU52F4568qGRaIwRdr6Jh/vS+0bcR/r\nIMCB29I1vT8O0OuMfug9auYt1KhXPFNBNylFKoY1J/AIMSlJkzsOE0JCyl/j\n4DJKEf/hpw/tFAZf/BTVbbsqQCE4CfAO68UjwLNVehQBF+Lz0/yyaL9QsNye\nUKHX\r\n=fXrX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGugXMexvh9oDXP1p1Hd3ytWH7cs6t/mgvn/3fd1zd3dAiEAw1E7LQeY6JCXTKJhiCZmGAQF8cbc6nRLdAKVVlMTX/c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.e9b01b35.0_1587425370534_0.9076193127374221"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eqMisxLjIMkuZx8GEcOQETAmLBdYezPgf6bJpO4Pe87da0VxUE3Pczw+JcQxaf9LhcBGegNq7cACkrtpPCMuOg==","shasum":"ff6d9d40fe02c340ac0caefd2ccd64a203fea75f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":55716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOLCRA9TVsSAnZWagAA32YQAJevsdFC4i1kNBFJ4yhZ\niMm7qwZjXUYvQ64qUe1Ps2+Lt/S1T+aTqJVmNOc7Wb5tVJygH7eUfgCpJvqG\ndAAEPJ3yOBWBqHhaPRaFdylnVkZ9Ox806w7x5ihtRCYKORZiZlFT64AnkVuS\nXlNDkgd4lBBO21QCs8UfVtvNizxwWz7tMQKEttdgnfZBfFEtvfuAydmUAh76\nSqPpH5emdkK27vu9Da28dR4u34xrp4xFfgZpQoeZ20nzk97FPwjK860CWQZR\nZHvwQksccVD6J9Ypizny2xJfb+XxBMKDNSz9PX7wVEfbyBM2carlpUBPk5KR\n3o/Qn25J9JIYhzo5wL3+kUXEBAJAzzQTBb03mmTKkHwvfZwmY9HnKuerXrk+\nOJJvv21kw9ZZh/51lkf6eJB5+o+Lt19Pz+5oimi+dloFOxFCKsZDEtp7m3Jl\npVxbJI169rYtvooxlYmniu/vMOzms1xWVgFY3ug280drurQsUjgMpmw1kpBd\nDXrEhxgXwS28owhiwjDFs7DNHjhxlaKVHpDJY3BbQMyNb11FFNzJxOUMmi6O\nvQJbWu4hQGPnNjJ8F4buAqY1C5s8npQmVZ22bxeahDu/VXwKkhU5JHBqaKfw\ngnqsW2SDEMrCqJu5OBZJU+Yu08vuMiMkmxrosYmCPjiQIsnNEBDjGtpjj3qb\nch5R\r\n=8t1H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHoJfNOX/5iTg7Ymij8k9GtdKZWzEobdNW1zwhp4ryJxAiEAkxREmP6DAuMRJY0qGEWs67GSFTfhshYdeo2R0lK8WBA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.ee7e8989.0_1587430282794_0.787325823270405"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-doIbkxiZYaFxu4Cmrr7s30LfLWlsgb7jdYiTuthiBD/Nt2j7tMjyeMRWiKIZtUOkV0wl7gbE4zaOcMGXuUKcDg==","shasum":"e9dee3ff0cdaf0c205b1d504fc1c7f6d8ac6a249","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":56183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2JCRA9TVsSAnZWagAA4HYP/iXK5fGJMqAl+xD5uP39\ncWZECBOksD1SzA9cVrmyvpqKDRdFaP5UsiJIHK7CvTQCeg6JP1FjB6k/792V\nomUtNZJxZRH72D3JgcFT6YNEKrHuGDHEndNnjmzVHn7LRc8WmENMrEvONtn9\nS4hKTuXEvxtvRVX4EA4faU5wepFGbe4Zs1Cwl7KIEpPXQHCmDIgmuQzDoJEr\ncLViSrBkJVI6raCQpItCqaofbPEkCw0GYKoSSKPAookOcOWzVSdNPtKCgAN0\nDiXmesaOueqk0r3MjRfJx7jx5bQXSWThwi2OqE8YLfYKMw7wYWGTbLvj66f4\nzsBPVrxV3Cs6trRYEICAiM+pLl1kVUok+4AdbVTCft0Mq9EOghFrmVIvVsy6\n2NdOcEIxvZEH04y2WHOaKq3fCnWxYKXhlGGq3x4/Z92cNix7DIPYOT3YPyhm\ntGrU9PnxDEc2RSL431QcZGITnTQGzrnqv2Y6Eg3sD2BlB/bt9kde8EKssU8G\n5FXYMMpaLl+PwAAcGSk83NkiRpojxgIHADlIV5/+wA0rOO9vrndaDIr0+3tv\nHqnPyyqu4tiouzClqTsFtbAvDpKFGVaQJgwJwLP+6d+PV85/SHJhnZ50j6+1\n4I7B99brNSkAIBpx6yyyxo29IFzTbeTLNFvgGsr1veVFZA95+tyi19CURgfJ\nY2gl\r\n=44R4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtJ5NYMqBnK3L3wPn+CgWHjPgcQ530AkIqWo8Nt9Km2gIhAP328UdMCivXwfQ7/Diawa7HKf8ecmgBwVmLT5jXYtU8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.9bf47ffa.0_1587494281155_0.5216674487552713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aX4xEVsSvhL/ZflKwazYtAWUpjvhMK7nYCS33/wjQmvjlhs9bOQz+b9mmevsZJa2DNkw8DEBPLAE7n/9bSDF/w==","shasum":"63c13b787fdab4fd6d9d667808bda2e49783abf1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":56183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2G4CRA9TVsSAnZWagAAuXoP/3RDW/lBHjdmJkukrqM2\nFBAOGC53RmOb0Xqz5TS2FVIeGVihR+hzg8hXxm4yEvXuLnyYYvxWtNYQQUnk\njliU29C3UOWabqQKzAEn51SHCpHiDtWWrmYgHFIwrF+Q1MSyNDZF+rC5LgCr\nYUmQNwnThOASzkrm/GnqlgstI1bzB5ONgDd9edQzB4oJnvkmB/qsA9i/ZOnR\ntJBysJ6IZdlrdaviTjwKD0zi1d+JG50L+YmgfDo6ZQncPosdV87zaSAsw+Ds\nMCSKakdg9zhGNEu7m7cxjLcVnpGUUCmNZqyzrvyl/Cr9HqvCmZMZNNaGKSN6\naoH4ARi9/l+wlinQw77RZgLZCiUEjXb8r+/AzDJ2+f61S+70TuDzdBfKA+dm\nGrSesDuoZZ1Ca+k+QBeH+CKVulfbwVqVYqzqkxUiLVP98V6uizJImZJHYuIT\nBSmO5MBusLh6H8MXHhaiZ3iPAtBXCF937qzDEtn9GCsABcZxbbfFDSy6wA6Z\nGXnIWqk8EW3ycExFzKPfX+1c2EQA2X1Uok60ix5uU51FwMwZZhs5oxycy1to\n29vISSdZrsWZRcd0ouOQ6gAJ7XAPpjQSeSL80+gFYEWEGM1MTa6DRyyedyZK\nFXUIyg2fe5017eOCUdYiD7ATug/aBLZ9csrnNgBU41niBV+a8e5QycsKWDdy\n4tuM\r\n=B3Rz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIOx2FwoMtDZ76hF2V+nmwbWC604QDMSWkVEP+pKwqGwIgCxeiwV+09M5T4q3U2Re53VsCmTjY9C1wMZ2sHp2pFlc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.078dbd98.0_1587503543926_0.43206301687309145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pEgD1n6NVrnA45vKn7Ft2qIwsZ4GmMnjHErlNPAMPaZcj5yX/kpM55MuYeeRXH+5JZNbFoXR5F+51NWRcEjt+g==","shasum":"54faa86c4aff2dc002f22fd18686a9fe74d5edc9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":56183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2cuCRA9TVsSAnZWagAAAlYQAKHC8EoJJ05IVIBGahFQ\nXd9lgsebFBd7c5gynmjRrnU0HguoGdHi0wdRn7uQkL48Ovqk/IHstwVZvThb\nciLyqDfQSc/QEarqjP4e8XY9WQJTxOXhopLi+rhZlctghmTN93CKPwRGZXQy\n9SxeM2wH43iaLvhi+vknC9W+ZvhakwsyzRTxlAO6N/RnVD4Jk8yo2IwvhUSs\n1Rh4kX1ttVoRMozdEzPzc6PeWrvOfTTprJ1JzJTYu9O/KwjAHPH5310/i3e6\n2hUFOisSjTlligJLRyXyQ4Gdk9lXijG9WiHAVVY7SGsrpx3o1ND7uqZbn0b2\nJSOxjxExlNHbcevzT9gyOL+OiiOqorVQqMsHRioNVWPtB7udsYLHZH287Oga\nWHcNY8bbmbIPAy9eNVat2ZVLxJeFn877EX78Vgx4N/lw1CBPTMoIhUT/LE8i\nMbUZPi/5ZWdgvEXAYw/7gdYgRI41gVRIS9BSqfZTffnJFAigeVX5to+4Dwij\nr1TF9sLYIc9tRD3WIQiAsXgqq3StO7rIfLK0OKigZ6w9sHDUyHr08b3LZ9US\ntNFahQJtjBN84+M9p4MGobmnYtaFuFIb1rj5ieLYbQPAM/mB+UroaVAt/Sy3\nSGtY7yTi5DUHk0VbZ86LoCy9qvoRdJKK7wsA4Qw5kE3GxJgPDAH6eDAiZGgv\nRvXd\r\n=LX4P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj+YyXGZOpt0LAoNOA/+Ow5Pn7i4v9pzkv0jXQUZptYgIgI1J2pTRDM4QJiCSoeSXHX10iaO4oEvDIBQULh0hK4Rw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.953015d6.0_1587504942381_0.30682303123453547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XFg+0Ry0XjwA9Hkroftnjx0roTgdKrNYjeR7cT90iFGqVrODl6/C+RV8+HGkv72rE5YzbMUi9Bs872nutG42yA==","shasum":"f21ad8b782c2cb55ba7daae8f7f7326f1646778c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":56183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yjCRA9TVsSAnZWagAAREEP/2UcUOu8D+Kw6mYTNvix\nZH9cBLkAXkG8E1dYKJs7jyqF0Ec+mm3koR5HIUV67jjl4dFRQxBoA9OsmpzJ\nIooRd0Apr30s6hjQRBJ/d7LRNWY5j4yDfG4qQa04IkYNTH+Uk71k/074heGZ\nSHaWOw7u+5EgP+8ylylIzNtSIXLM5YkYzk0Dg0X54q0VzUm5yKZrZL658cUt\n5UyaBzhU50opLeJDyE+vCOFUvqweh7bGGUj0BbBf8fs6CYJsS4yy1PlZiMOe\n4l7HGoPW6wDsL3rx3gXYoFUV4zN4nybi+rdzK7gyChJXw4ujOgbVRClN3onc\nccu3KvucqD9prtYS2Oo9lqiUfWDapAVDdpsEvvtGFDlsSg8rFj7LgFLi0/KJ\nywGfKueTmMPctRgyAwQzG1N7g5mMHWysRrNMTahfCiSlNepGTX6SVTIcIO0J\n8ET7MZPxkvoc+Nu13UtYZThH35M3p9hChgudfbm439l6de1RxENjG2CWofTP\nEVNLH81ZKtWloZB6nolrItW7FveSKs0BBijEAdD9FdvbB0xz0v0ES67ihEFn\nyWno/QoZCShKdacn7CvTyLgkxIiAyol0YMdghS5TMbfaACz0qhn0muV9iz1N\nScK3Ogs5lVytUT+CyaYC8Tv0xglfjR1/oVYG7Wj+b3cakIA/5JTxVsJZPKjo\nX+JC\r\n=xmUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbgDswOtgBb3/ei0ZJ9JO9IoHQnyqd+y8YQd5tsLfMEAiAE6onzPs4A/6S2Naypd778H4UoEFyOGkjOEisMtG2Cvg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.c360ec63.0_1587506339537_0.8493543590872541"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LHvJ4Wly5SIPgZoDpBsv2uS/euPw7B5KNIAryo0kG4Xm6dSVmUiHz9s858VsVEhzl0ruXhe2AZxo3LIYm0JSmA==","shasum":"7a451d255ed8decde82ca1ede4b881116ce4b87f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":56183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3W7CRA9TVsSAnZWagAAZ/IQAJg1dlzlxSTKyyYvF/m4\nnOGtVaf561c/h0HKm6dKF8hWG6SeNv5PzFUderHZi3bAuOrWcTOgcyris7Bm\nZJQZbnYu3mHDiPbQDEzcCycKwkwpCpokO4175tpzZnb+nBO3jpI9YimFjE9S\n3v9nLa0/KPwZtEqAMNQKLPLgwl8qqTtgny4ZgbwvTR0N+xQyw2hIKQEXLclI\nlc0+fgKE9HKwjIXQeAeWIxtVms9/Fz1bW+9kQ2YrulSI2zo+EvYcn5L+nLOV\ncnNmoa3B4pSTIzsETvDOrBBKjSBtY5WsHTWyrW0WNB63DDeAlVgZR1sVW/eG\nWVOcyW0KawKz8rL+mkdziM+w/AocirXEHn0Nh4fTQEZ73ac6LYZqq9aqUGHH\n1NWgcbzmPorzpSxioXx8XTyznjZGIYdyX+3GlmnPX66gkrNOGBU+gXoBw+g3\nJ6387yzpIcR/WAwoGw+1JuWv3UWRpuvrLUfteoffr669kDQPHiEmhuQK9g/9\nvC3H/oT0fPG6fpQnHtcYt++3tteeL2UiIiZk1xk4l7xnswqBbKQ8kZaS7HvT\n12XU+JCi8IdifumCt5OzhMiy/mbegO2O6bZBZdxnewYsiQwk/E+WSg8PegOd\nN8Fk26dekNqIP5qLDcMjV/y/ZXpr+QgaGRzr7ajRLBStqe+UCZb57DYk/HU/\nm5Hj\r\n=nG3I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCenGhC4OxzJg2rjxWjM8kAG9plyKKC1Zu+P/S5n0Y9iQIhAPDqrL5GLmDtqdJFzK46zNZ2EMcSfqhbS++a1E+IU/cu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.d71b65aa.0_1587508666815_0.8634920079955029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"favorite\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    addFavorite();\n  });\n</script>\n```\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n*None*\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XdicWb3V8pd4Ns+XGRNIMbNsIiSKgGsEBzTN2jtsWQD7V6aHa5/5b3/BSsqX8evF3Udfu8kyFhHzVBnlUPIRjg==","shasum":"1de445a5d4be5cdd36a2b99a72485b7dcca6cd56","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":56183,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUJCRA9TVsSAnZWagAAzkcP/jMSNZTKpZV8CMyQMbKx\nRoNSq1MbL0DxRwqXjqsVO6K/Z36S39xiSYXEGKZ86aPO4fOjF+U/pWNswtcG\nmGWDmzQEj8rSTSvojGHe4RN1bOnfvw7hsETZfH3MMwC5WFVdP8vMrdj84JBo\nboPuog/Bmwz+clHf9vJ4wXdFZdsR76Gb0x86Mg8KGyS1lCU9SeY0KSryFwX3\nxVi/7kojpvWFupBfUNECo8thlpenacGb8iJoEw02LAvAZir9d6dzFiHxeN4N\n4LbDZytLD8AogEeGp8Rp0baoFx1AW7lsIF9yyMNSraBr99gyS5BXpmvAmHjT\nJ5CdPSmnPWhdvfKh6E1x3a1J1XUBMRx1BNNKYXzmaXjt6GTzsD1QEIuLWBzF\neN/suH5FyK8+IsOO56JUCJuSHDINitbo0ICEEIkV4+dW4F4SmzDqhhLFwHDo\niv8RTzLi+cgiSF1HRxulH3eI7OrxR86oFFS3OV31Wd973rdBbee7noFTPqPW\nv7z+SUs4JkYALA0ofJJwu46PJhzsX+vGTg5VelR9Uj/6Bw/bsINDtILQslpI\nZQlJihVYX4+UZyMTD4cdVEOO4qnIUjxWtJp/RY0l18ictxlU0roKDXFWqoGe\n6CTVVCLPrGYP+XmKg54TYe1AW61FO3Um56AMTAbUEQIY9SZTFy+5PLIjSJ0i\nQGBk\r\n=VzRR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGkhKjYQBBGwGJZKSNo6lDVnBViRroUiURrhufRhruGkAiBOWL0LqV6UO2afNAI1HAKhHnDPGgxgYQkrugQIAap3Qw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.58d51135.0_1587602696830_0.3779973296339476"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OvUce+qJBNbLL7AAYJt344COTj3UbUs0sd8F0DHK2FLoYmNRcnShjxUr80c32CCkERJtINNc8QcLScpvIJ+f5A==","shasum":"5480f4e7e42882977daa98bdac6564a3ee4d17ec","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodn4CRA9TVsSAnZWagAAtHMQAIfsrDoHoz6H//PZHDJ3\nL9VWZ63lsiBZj2/S+aot1EOBwyBFf9o9xu5hIWEVpdG+dO5ueTsiMLzUm0Ua\nJ4LoodwRQMqNNqonyxL6FIqEOfndXbyZAyGctKwvXK98yNk5u2q2h/RQQdTT\n9C1oEb93ocC/fgsMexSN60p8JgXZpo7mK06f7+snzGoS61KU82rPC+anx5jn\nYJNqirEHDetgodaiom8XOLrJcxKuwvmqvH1HYwMlnUtWgiCmh73rWmq1E5d0\nMcW5civCtpbjmnw9xcpccQgBGVfgNeWRfCAuCVijZNA2o7NwMOZxWVarJHhO\neJkU9xQ4bcTHxROlvid3B2YbG+wY9J2S5M0oB2+rtn47iHZibo13im4Qzm8f\nb+31QgTgBmPSKu5aeHymEohSALv6vUrPi3giRwz1/qJ6F+QjEDKWK8AgKdk7\n1wF0d62KLQQ3oQvs6939aMnw6q4B0bpve8mLb8fu9X6fnk+zeFM7UXlJ8bIn\n4bpnsDDKSWs+R9mziwO8fLVuUyc3MMVRj5EX62OlAgL0z++xroKQNY4WQL0Z\nqrkXOnkyWyj8ComeTqz+3lyGufyx4JlhMiwmgshoMVVgOPkNo1STfoE+rcos\nJNmUpeLmzU6cY9qopaL/m7hBHckbu/2E3zC98K01NuhGk1tIvdMeFv5ftN/v\nRtTS\r\n=Y05T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBeUSGKqus1rpIkIMYJYK04Ce94bbb/aIss1jU6VQNjsAiEAyX9WyUpsp5DrPAz/sO1bUVI74ZRXViBuJHlG4MWX7fs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.d0af8ba3.0_1587665400387_0.8786189916051979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-D/UkWkFrpNqHr/2QKY2CdSx7P8hqAcIcaG/4llWWAyRuw0fZZFtsFHASJub+DTHcIf1mxcFtqWddAQrjUnSUmw==","shasum":"554748bf4274ee3c58a77b8325151bf7f373144c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1hCRA9TVsSAnZWagAAGK0P/0nvd9ZZUDgbDiPEkl0K\nTTky/K4FprQ0Aj/FyOCJEH4CiE6QV9FTUY0qWzrcJ3uvdASqM2mL3hVmejqI\n6D1L5LWsyoZ8vNo2/u/u5lZfRJazgF8pbD1DCC2MwkUIIL1UV/cUT9V91m+u\nDvgRyjOcUeVP92xS5pvzX8axyrSEU0Dv42mOz+o2Gvw7FSbjSjPNtsfGYNhZ\nWkiCeYsdWwdutsOrn2MYgMdKKxYknDquF7Si8zujSXv2f6lVqvC5yXgtsX/X\nYTyeQ9iRJaeFtXuoR5NEjuxQ3b9/oCv8qpf1fDQg0+Glfc0lIaLUUVJsZRnD\nF/7i+zWxjxdljW+nBY/jStQQg5UQPOxAx732AOo7e+zCMUxwTHHuUeB9sx4q\nt+ZhkRBsRyTewVRc2kljKpUabTn/7F+9f8YeSITrXwtSlKghDs1/B7Q8PSu2\nax6BMLx015YousBb8ssVkf3LHV5T5MfiD2Lri9D61zxwzGbq64jzUJF7wjdo\nWshCSP2xOqEOxry/VMFxBAbaNKv245fpxhRo47q+cPrhjP3aIuX8qZ/Q7ieL\nTnHMV0423YvDFL9NZ8mGPz6SpuvMr9QsDU/9GYaGrfu/TD+NVf1ncBqMGM0e\nveLH+FSL97wRg+arK21I0ytoi12DSTWXIffy/Fsfrt6ASSFwzCBd2UNc0lER\nqvF0\r\n=5Wfm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkL5TyESbPLPaKk6tbwXQNGG78yOWC70U5MoXH8w7cGAiEA/Y/CThUYPNvviaLmZY3gThTyC0fPRS+uXtayTdAFrjU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.8872b17b.0_1587674465083_0.03720395828892675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FlgF2BBrFqMlEOdggiLmVbYeWhibwF1q9g3CpmNkF+dGWWhsPKc757Os6xdxVZlaQCPoQC4UJJ7ndDMZiEde1A==","shasum":"e32c885bcd3bacba416c71d264ed112dd6fe20ac","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvoCRA9TVsSAnZWagAAwboQAJt2Vkchg9gPnK1qszJg\n2eRZleJsaQNY98OtYKlY+nFkQyCzJ5Ww1qCRLyngnpH4Q9/qXz3HLKXipwlF\ni4cgxm2OYVozKHYnaQ37hx2APxjdKlnV/JtWP+bUlBx56ZD+RGuSoHRd9lYK\n1i/iK7RrLeXjdn31K6qAI7Z5Gpe3gH+q50I6QkNC5LVxrnLrCQQTVkBCeLKG\nUEvKxbnUqN+y39GUZd5qwWiP9s9ZodTm7MzMjAR74GpSikR+Klng++s9T2t8\nKI/5yy01jPZHi6CfEwQJdaTlHNNlfEFLGN/24TelJ8Oz+0Pv2TAUg60O7DdE\n0984Gc8kP3mGr2ODWyc55pzNSD7t188uvej6LaDh17onz6KfDf9ZSIY9Hg3/\n8/iPeFKP5G2wNWgGhhk/UDVmsglyXv36gJDcf5IT2c42adEAjyyuZLCrshcu\n8CFuit9R6NyFqYuPnslgdfM2NxynPchKdp4cGlHasdphcyZyZIVS+bqdhbDo\nVEKWhe8vztZZdkIC8JpEzudzGnss0GEdHcAwY58d3eio9w1nVnfHcmZ3XnYK\n0URmmIuRg6+bQgOt8r9TO+snxwYmE2nHmM/BFCPXjX4MRv9aSgJWgoDlgxhM\n2+SOL1uYLeSjd/6Sq8ttfoplzrabWp+UVYPXTDhsVv5Y2oylDn2FCRM3JyYZ\n9fXv\r\n=qIB7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCmEPXGv3byzovcLrqvadFlK89guQ/8+Fy38kls1i9PAIhAI/wQIPs20bo0ihOdFcWJ5BswHTpUz888lG/dO7FrjAO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.eca1a610.0_1587678183537_0.8690510450599134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HJ9YsawN6yM59KCVRyc/5rvZsaUtAncoiBEO20vuFARFT3ohoDXTPR4q/Bq9vxIYXc+ZbWv7WzFrWxapgVKjaQ==","shasum":"f79994577750017b860c77da4d4df989a8d91873","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpFCRA9TVsSAnZWagAAFYsP/1RVlxh1wOjPfd8Oak5f\nXn9eC2UctdqMLoMdcGF9IdngtpmQvq5Gl4yfAPDmCsu8mbxNxONgjdIXJkfJ\nCMxVRTBdHdRtP7zhA2O85fmJ5OcR0XMcLAh2aB0hj3Gm8XQngkbj66AOiv7N\nvfuosGVz4lE3WcAvpvUf9cq8/S8R3jAtWnflK5rQXpAczg8C20C7hFRXVm+W\nTiZwQ/DSxjF2TElkEXn/w8WDfLdsJ8NJ8tMrXIYFmEnbtwF+Ed9Q4/zKidcN\nz/azZN6/+O86xE9QfP5DP7RuudKONPCw2lL67Sk8NMiSWzyI1E4aRtOlmF0T\nAGdRSUuR2N6bsgzq+aF0OjNVTNmDOEWKi7I3e+H4rkrFcPRk3H6WBR16a8Dj\ncG44Ii74hJ2y74cdAF02G0curug/joW73FjdNBYbubm2crTcQJbAVP9JbUgE\nHCpBXTqpu81L6QFusiyUcwSzUxMg0FCPwhRfd9qr2FEWhtq/G7k3Ozop8oE3\nkTE1Jtu/nKgjWzibeNk6D1egZPIU+Ij4x3ujBBVY+Qpkj0TLZuAt0qAU5uj5\nW1L+z5trEvV8pU4wCmgPKnOlIYJef7HZ8XZRTxZGGVVZ/odDL0WnhLciXlno\nW9CPAsZWFKIBWPkEvMckPgHwRSjR8DJnxm+qj8QuCRfbLicunQgzFScOg7CX\nRpuO\r\n=eCVP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpqg5fyLtoHj0lPqmdF1OpMgW6vwKLaxHy1P1opWtp7AiEAmjs9kGYeNu/iBYI0hMrvREFY2kDUa+wtesRCWt9mDyY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.baaf529e.0_1587681860942_0.13006685430506426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BRR5JhcXvH+gLz18gGpm9pST1GWNzWWGvHRS098wyyzgz09b3doSTKt0RBNBdHE4PTmzxhMKlnZ/0uK1uSQ5Jg==","shasum":"98b8fc29dde7ee96d1d278b8b144dbbd6e4f169f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFICRA9TVsSAnZWagAA8zcP/jUpIWHfSh/B6jZWeecW\nA+kW7dhhWkuUEhrrenBYhibF2S9Fh64oGE+jQi82AQu5NAWqexWQZjyIRyRX\nAJLGsBUFvbYBZ39N2ulstySH1aGCgGxX2n2nyHAJ/5NqhMjqfGxGDWsaj2uT\nFhqkfBjM5BFpuEI8Zc6AJ5SGkUMOFFFyytBu0VVqAxOkt4L6beNU+8nA1YVI\nMBzBE4JY6M5+LTes249SVI9Bw+Abju+dRehJ5n6glTCVqsEIDBRto82bbgQE\npY7lWEpCziCqmH5wkDKXkOfTo7iDoHwRKf5GPk6wa1pagFdf7DuLBAa26v+6\nqy9+mOR6yZRgRExpuvp8osJp+HE3MW6wC2Hoa4vnb3p0qH+e+5QjRCOGCI1A\n7FTlM+WzJrxGykqpxE5dsVIXXDbEgLbtX4MnLhb/Ouk9mKU12JT6fXFv7pLA\nhAC1FkbQ4hACjZlpyBClSF6G+WuY2tmVGC/tJoiNFe2QeJAjFePIN5rBU4eb\nZ2MgZSPE+t4QzHCjtWWs5OKsJZfWXXeW2qTUUuXg1RFGOg8YM1tZCyNm6MRW\nIzBZi5zotwxn39R7lerL9Ph8/k9JF6EtQh1fN/0TAltDg5/9DQK0wAPizbJG\nupheZpCbD5jU0nMzio7Sr7NdWJ1IkSgm0hBqztZf14MN0L9bQE4yJGHDRaPU\n0/3Z\r\n=zBjE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDukQwVmGleDWGv50J4BnaSReUQgAlgYdKldUtyUwOTxgIhALeHUTuORsVJ46bRZ4+i209AywEmFazQQ+uamNVI/fZg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.7a7992a8.0_1587683656357_0.49659745702561664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LrA4KMhnNJ+Z2aHCIhUdScCeceJa6VbEgtG9WpAm646Ib03nibipTBpOSi0FtM75sXi0uEih3oeAu5ktLARa1Q==","shasum":"7a0967e3e3ed82c4098b548fc7e1e9e788c2aa01","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBkCRA9TVsSAnZWagAAcYEP+wY1aJM9Ho2PSJUzH/KH\ncIPqPqV3ntPuE+l3Y69Ioq7UZue9z+cPKPogKGIo2sjPYswczmUkcpjrkGWq\nOHwayKk/9dvltZNDvpS8u7+hr4Hw7HSTf9fFqcaSHiXY1uAZmonAE1YsEQlx\nsxZ5igYsNQPeOyr5teu2wrfTYP1uADXv5F0AM3eUj3puoJw6pQSnevyVcuwM\nezT4/0GbKC+igu+UH4EpJuoj36/ccUiaQxK16hWFITbgwOMfMq1Ck9jbWczD\nbBIAL22Tep1jPElAH1UJAYHtiKn7KD1i7LTSk8DTKzKC5RmB6pKzV3yUb85D\nt0NDbFGHRgEeobFr6sWq3CSbwHGkrucJ3uY90bBUn0G0aq8B12iVBMwvWv9z\nIrlbOnBQi1GBb/OZS+SKdLqzdkxEDujgUpNSzuzyBr0W+s3iKyFWKo+vU91T\nmkKIZBf0xyB68hNiQNFjuePi4ru51LYKrCr5D547yspGew1PxZlj71xGYlk/\nvlcWi2MvsobTTw3yySnj+Isc+vq7ZCby0zHPCeSlQRYwNC+irRCRqBYkjRdM\nzd1SomKfCFmwj3EUv6Jlen/zzC4unD4cY4d9qAM6bVVi7jcTU+sUZMn360oz\nXQ1BmXRIh1fttj4qPHWAELR1b0720WlUZOU3cPsUJnrPyGICTGr55aFsL7ov\np3W/\r\n=xOvG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgMc+IZLKPRA9TjkrOZZzHdglXImdr1Hj3mLxDVjRuoAiAtOJzYrhs4b4PnWdL+2hXxqWhdHEENuU10GeZn7X82eQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.1150d64d.0_1587687524310_0.517119653208606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ssb8cfreszQSQ3iLk1U6SM4G4u91rdeYcGUf5LxAZmiBL94AYn39AWPwVLJLqsqnNIGW6ba0WOebBnfSfx/0gA==","shasum":"22b81e3dd5f520136930f47ae186d954f292c135","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eLCRA9TVsSAnZWagAAiV4P/0g68fMuM+CzHFNvlkA5\nTBKrWCCYB+2L4MRbpe2ircKNXjd/spKS4UuaZFCYjEf/NEei8y0udKTbWp6u\n3vopEPj2touxDkLeVkdjp8llij7XdNtt58k7kMe5RHnzlHt1R/4MfbIo3Bv/\nN32IiVk2cNuLELjYRRvPIp7G2YETLPKQHlIj5+beCJ/H9yA6oOtX5Ovd83Pq\nZ+8xZXp7ABxXZ0id6BK2nnA5tUBIVk5YPbrgeujfXkhezHnH2x9v1U3GKtsF\nVe6UlM9S9mimRhqqdpDk1dsseswS42Rneod2bOBvS4dTEk/yVGMt0yHuHXIz\nKnHaXnDn1KSLDXT4ItqOe/BrQiAv0FURirwGAvT/e7nZT1b6iTqL4g8/F4Oo\nVTVUcU7YUykZOvvHOvGprAEb7UsAW/JRAAvflOtNgYZn3NWkQQyt0qTgDAzt\nCkiD1ETImNbXKF1Gvy7QMY+Y+iRfz9zDAtL4O0bYZWHSdDJJqOZ8F/wjuea5\no0LKEj+II/SD1EK2/B/k/VujYgLknBavE8NGokLaObc8cYoN9L/o+5RjOE3g\nQRq5VhZxj68Kp1dbXhJger5NJ/HUqIJwtOVwE6di0/fGUGkps6sDGZiybloj\nGPpVg5gCnbLhEp8UsUPL3uF5rZWiKtMs91PmCg6YJzt2ESOmYHBSjEfnkuei\nuCEZ\r\n=In9p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+G8u13CTkm83Jsyz/dEprYIuJtN65BBdamsGcrNiMCAiB+A3QgB37XOKAqXXHNnWtOf5ssR+8FdzGf1uoEWga+pQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.dad3f828.0_1587775371167_0.6056699140079511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Z6L8azwJxnvewzJYoesX1oPaIv8M5zqOsTcmSp7fln7eE5L4wBufJDFszGae/hXy2XGQD3AcSlEeDXm0p70oKQ==","shasum":"e610c7e6e67e04e88f477ded4d641634d75cea5a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MNCRA9TVsSAnZWagAAW1MQAJRfs1SA6rIVkiaQvZ6q\nkyGhoZ1hA0M6pji6dhWMVdQzTcya/n8Wv0gyQCwLehjyTmJghJ8kNVUnaVcH\n9TcC/z0N9GCF8G+uTDtAGuQkon0waKny/VxCmFFQUwsDaVMOSwN1+gicmIXR\n9nrGeDj+Wz9eNcN4b1UNZLCAPUN9sqR6Zjqogj7Bs3g8nIahJYKSkvhHqjxd\nYH6xZ9YA34Vj77+lokaXZH6gpeODll5HCh1NHCFpe//tmpjaW+rmR7J1cdVa\ngpUIoeciJHoACo8LT57eIU4VjAhD9LuCQJCW2oHbuanzpp4WTUXmJIAywXRP\nvyFhbdHrJvMENcnB0CVag7yUS2v33EUABcKRzK3onwqOC8TtFIcwULQOBh2H\n40d6U/cV2o6xa/p4Et0KqA3dHhxTxmNsxNEQKe6zQur1acAqluDcwSJItP3k\nfUk8gl1LvZs1/zgohLm1yx4NMrxSgw9H3EXdtrGx3GLg9SwVd4CFJkhjwEba\nfykqZeXGK3HfRzqhF+Qh45HSMFWs3eFWQiqklWh2Wko1BZl/IJROZEY7eg3B\nbg5/XqZ3voyWeqSF7VSQ0gL28+N+lhkfk/efNue4YJZN8dtXVWmvDT7Wa3Hq\nfWRoHFghvO8/HmgwiX1zCFqIRp1OYYUP6WXg/JpuR7GClxl+i7h1rc05r/gG\nS7T7\r\n=bm1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5lBhAXlbCYlu9YbnUClFtSNDPuZ6cobahyI0G9NI0RwIgYsHE5cHFaefO8btBPCgJryCIQ3yQCEXyvWjdCF2ND5Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.1bcdb47e.0_1588036365391_0.3924447412611105"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TwG39peiTB0XDoLaOs2d1vc/6P73qKafcsn/rysNJDNh522UQkkb5x8vCTeUZY7/uvF8/rGbqNAA8pBMgGWbKA==","shasum":"33e261df35917bc8495eefa8b63a506dfe42bcc1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5szCRA9TVsSAnZWagAApv4P/Apvq+LxpINCCbPv6ur+\nYFzgpw9YXUjnDOkeMN4be0ldLaaVOkpIyMCRKiOpIow7gUOMtZAa349kCpcR\nYMnqNfqR7cGDfkW4jMzWKwVdd7N8Tj4eLhyJHJzrbMgJnsLbSfTB3HhothZu\nuYC6lCG/NKkCKDiO4ql5EI/8eXAWVwU4H81PCw6qOFJejRU4y5e6S8mawTeR\n0ivBS9mPtGYsY2RD/LXzrGVyhtimo5HXzuF3MsaxBLVR5Fzoo6DoLZyASdwz\nISGL3EtjsBljScC5xO68RUr9lIu4k+9HT/2POhh/bD63P04EK4O9+TUR24UH\n9DUMzvAlQVvhS0jMmpfaabGx9GUvvolo64VlAe4JI91HkK2dQGduXirXzns2\n3aHsfoM/ldSsi+5PempgA729fyTutgmEaOis+NNY4rbTRGIH/mgKi9ac08Mo\nLPoSg6ZerBmrcaG5595bIEcXDFRtnmcTB52338fWhaQs3uBi/mXQda8RtIOy\nysmUpoWNr7l3N1BaHdHfMJdp2IqhWR16p7nAvKOfXvb1kB/RzZo/JbXnPqZj\nRwO1EyRFKLHholJRVWTmLZrBwZB2gS24LMtIsyYYZ6Uu5Su7zLGLQl0kpWIT\nb7IxAnkgQicgGsYhwIq0uJu8RCH/NjwMocG7Suz3vGt6+N1Kd/mIOjnyn7wk\n2hNS\r\n=GAa1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyaLsEhh/Uvu4pJuHfRquxMTcSByF2K8NIL+3/yemKmAIgeRLm+JkgM1wPxjjnYUz7jQ1ksiUTnI09cJEtvr/EOqk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.86ff1b9f.0_1588042546904_0.3024078075915917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-joTdJ8JIYjyxUZkBrqDL/TrkrQ4NGa1+x2PgTaleXQ/MYREaUjC3CzxovG6KhPRsuV+B0XMpWAkUKhV7OiHSgQ==","shasum":"7365139b6ed5e6581cf33a45fd9872e04e974432","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BtCRA9TVsSAnZWagAApwMP/R7TnVh4E/8N6L5YFQTf\nd3c82TApwmcL2Io4OpFp3RKYvKvcGNl0nDo6dlq5636T4tVzBOgFS3yjYYKL\nqB19tjgdSUOq8PaJ6K+5r+XryzaFlDQE6r4EcAVP7//uVhTZTsncHNXmLDp/\neYrAWrEMdvjhm5gapMA+B87zMHsRe2O0O94JcunyifATqjd/py4pWkWKPuZP\nhsFOGJoNHfjReAcSnDwMZJ969vN5bycuIJCYdRnGo/n+3jStRlnuFbwuzhFI\ndq60N7EjayKdDd2RbBbrgKi5xCRuPUt4KuBuj2Py/v3G7ERyNRgnm2yiPyhR\nq3jQkwSjgSsZBnXpq9OTAkp92WdbRYPsy1gmut3XAw1nB4LMAaPBa/zd8i6B\ndU5oaRJog4x7JwO7YBxhz2Ww+0GiCZrUlbmZb2jwiNnV8rY7zwIZPY2uvrVi\nh88TqWjUTE8htTqFdOy44chlcV6wX9Ce3VGtzF/VA+JmKxGDiw1jXPkiv39V\njyT+GTeINgrgxI7ODW8kJ0UEnXs9txl1OOBvzDnJWJp21ZNVylPNrOAEOndE\nrUwV5xsurfYtYmCAdfCr36ogIzt1KlW/tpgnH160bkzWpeMbYwMPiF0j25CB\nc1R/gTg6EzKCsj2w+jUN+Y0KAjcMU0M3r01frg4Twsz31yTPTPZQl2T50qcC\nabhc\r\n=MhGm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz8uw6MSpg8ZbYeK5e4UeOZVfQCP7/lxy53ZyzKeYgugIhAKTtmOJucAhedQ4VmxP6z2m6co2S4JzpqGkh8Es57m2a"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.54a86b20.0_1588043884652_0.6611182137035025"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TcA/j2AEPq1Q+6bed32eaKlzZr9SmLQxupd7HCjpkLnud9L1z/TlxHROfGnrd+D/lAVqSFrlzMKWZzGaYFEdQg==","shasum":"67b18a40c47d0d1fbe5cb4d58b1d1ed17e56a209","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqil2CRA9TVsSAnZWagAA/Q0P/j2VEI+oylhbeEFJJTuU\nMVWbwX36jUv3B3BXY6Xxvf1KoaZPVqhDhhjkZqCG7sa9wU1LzBbNsszhw/hX\nqdllzXLF4e1GwKmoeFKyvQdrDKBA1ivFgsjKsisq0+UyDdeuNHRpf0+r7MWR\no7WCySwQ81pyOX5m9v+5MHnJ58i7yQGfny7EUHEXuKA+daQMTp7604E2dZWf\nzkLLZ0TnaA1aMMSaq3e8r2TJxzPmBk11a9dqrOuu/W0QnMA5l9f9hpew8wxY\neSg437D5zqJqgw5nccFtw2kMM51WVa0yYC/JtmnF+hwyO2OUPXaF3aOtBO3M\n3ehZW3tv7iU/If4C366j7k2IUIYjHSgEBHvrdDZ8yn/s1Ber8e9dPGy8Nt5a\nn1r/Y0NSGhgtMhsjcdZQupStfun8Ij3OypvRS2l0dnYN1VG4D3D/q11zZYb9\nEX2gBPAYaNUT7vaYJkScYlWUBICQDHeZmRy8UlmZ4AqRO+by5VdZ4SKhrFtu\nLynRTm6aRhH2fYGEietpo5mrG0Ts+JyME/rl8xOOQxH4Rak4wrMqx7s6+xPe\nZ9JUO2YNx3biRi0av+LCTXjYPxZG2MfV/86nXDajY/pQ6bY844VfS9iHGiZq\nHTBznAFGW0zapFWN1q7IQ43e6Rjkf/JuDU2NywzRoLBIYs1K5PrOJZ0Z8Yxf\nY7Ac\r\n=4x+I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8FF5ZzhvqrI2irDZFDyxuREkJAkirTdwsRxu07DowRAIhANvh9z9Fkq/uipE1qL3r/eHF3fcpLcqim+6qckIGQgG2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.938fd24b.0_1588210037820_0.4306686326546729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vPm1SSABYIply+Nf6lAXpEQqQ3q5rpWnM1HHj7IF6x4sNwa7P5o/fGaTZYSq2Kc3VqZFSbfVfahBtaozNYs8xg==","shasum":"73c584c345fc89d1aa547316d8c97b32bddd7ce9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRLCRA9TVsSAnZWagAA2ZYP/i/4NbKSvd4uCV8gTP7q\nJvzvnp4wUY+RxEw5aHfv4ObzvQHT4Qbl4x9oAfFPPZAALZNLPiOf7xOBU/+m\nkX4/QbysL3QdRz6EDDNsTjid9Hlg4EafXOt9+DPjWnJpDke6XBToBZITj3/K\nIA1RHMFNi7Dab8yCPBLhgh+qUovUKirCbZDJoLIViuH4s+EzIgn/11Clot2e\n58HCxIzEvl5TgrsHgyws4SecVjV5DYVhPPLca3Nouiyp+dViH4M/O6q9/qsr\nH3p5sDNCKwSeu8kBTGupFzn8rSIXw5PnnqJHwM5doPPjd5j4SoWVec/sI0Bh\nrYIX7Wy1O1i905yManN+OWxj8W0Ld8n5lhiu7JnBHJvCaawlCEDtPIHFJJHD\nN/pisXGy/pbqf6dDKoz68L9lgHZVy8ouFHzjgHtxFaB66zO6JHqdVF1XNHBQ\n7B8hjOKLpUr90eo6BX/Vum5+MMTCl5HKS9k1UU92mYh6mndSmQB6E3KJ8DSP\nyGofBhF96wbGlG4P65UaTKd6DRHFQJ1hU4zHoRf8IX1U+QMQ1K12m2gtT7lz\nWetN0uuVWSr9i2tgebJagfv2kV07wAqKA74G+ECgF9i3HRxG78LMAwJvpxUT\n+8SgpynMX83ADfumJpYu7Ev8KyWGg/wivJvcqiiaI/0BUquc+SsQfHJkXRbh\nepPx\r\n=6e1N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyMMBuqerB5C/WPK6yOjEMoFq/g1j+2W1QicBWxkmlEAiBxLJ4DUgE/t5W3Ei3xp6zgk/pak0MhPpK1UsySvgySlg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.39e9a008.0_1588212811230_0.9888733694796275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l+76BFTV+QBIZl+mGnb51ZKxMQrz/bwEp0AJ2RbBDzSrJyNpWePm7GMfXtNkM+6Uy5nEHa9BLVuajHjxFZkXgQ==","shasum":"f8460bb286d071314aa1caa3fcbd75ca6c403f28","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovrCRA9TVsSAnZWagAAHTUP/31Oe43bPpv0ollxuCQS\njyZJaeZ/hlNTsBDLa6g8uuqGqpWFDcINRikIGZwpQxJsQs+jSPjFnJguFfst\np6JAOs9yxKiL/dmPY+Hmtdsc3islp6D90qGpzUjFE1h/klZPTG5EvegF5lrK\nmg7QrSAEbEx+FBs//lks33JCYp9+88TBEGUsqU6RGtZRGkt6fKHfH2/Xw2HC\nn2s9AUMZSvEZMgaXmamMXMLdZtPI7DtLoCenfrmnJOAAszpUhXZKaUpCFPxi\nxa6xXcMjFRzzA3WW/cwULp2QrUn6Mj+qlTctPde7mJNmxD0gHebNpUvzFgOX\nIOCbuUb7/WiyWlRsVFfT1hqIbeotdFu5PNlj6xwKKzxSo9o6Sv5IVTvje02W\n2jHRWbmErVvCEyMzI7Em/ajb9G5k2c7+wu47VoIqkQgj+6urRexTPHk2e9Of\noi3TKAZQcwJE0Grtt0Y4G55djEN6YAH+MeDo2Qrtdo+ImBMQNhwB4I4mJzHe\njIpH5zMvReDIE0RoRXO54RPgMfTWIP6DFOnsaRQmNm+4sPQvghEAHIBV+8Hq\nx+7A/n0JNkIDy/PciKwn14vThAodhr3M9ezmPU1nH288sWxla2lH9xu9GjUY\n1R05tlwM1dVwt3cJjesiUys38PDwKL25gh+Vu9n3qwS3YXFbIJJBehNySiDK\n27wr\r\n=fFgv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9c0ucjHsn+jOdTw1dT/p9KuXK+q3XYF+qDUEzHrNKVAiEAiTFFPaLjvvp0cgpN7ETw9ilVTbR7BcZmm9V8KAgAzHA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.f3b365de.0_1588235242817_0.17466336153929518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0mDpI3lsWZOUOZpBlubPVkD5AmYTPjU8s5NoDFnaR2yIpXmXalkvP/Oy9vjiwxPgkE+ZBmuPIX5f1AO6hCAqtg==","shasum":"8b4e8be06ea7152ee350cf91505099ff41001f0a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2n7CRA9TVsSAnZWagAA+fYP/0QcuchTk7+Sv8qsWuPr\nkgY9JzIxe886bfpyxnBxLonpzICkqj+mY6PZn9ifSc7K9j69b3BlOG9dc7fR\n+/qWESqhurj5b/kQTd+q1+QdZI1GsJYNlng7v5HZhl6SNilX2/HORX2DCVLV\nSOwZZYQIxckEY0PbGgrbcyb/wE+vGvUlDfn9n3SXC5YBG4EXHVY3ZBuWmQ0I\nGDVQ55f4/n2QoRw1MPGYMX3meGJfladKgEPlmWiy/mf1vyQZIQxRbdsmEZLH\nkymkVWCx5bwuhl2DfqL1IyxDf1xsgy+8MpllViwva3fwSCyEB88b5IfjIzKj\n8ti1yOOgERY8yotXizVHmBCZ78dqZktLFwDyJYHiJ8v/awiZavpxxHPeC9ac\naXXc0lRYfta4fGmRB5FRb/fxSSl/V9/dEJk6aXMZsb1czUr2fEFxuKUuKKzH\nIOJCeDaNZIyT0YV2Jrs1w+CnNBtEU9lQlU4RrLq6yyFkhuiYbmyRNPS4t2ci\nue/Mde7Go5EcLkHIPqCwvw0nLqLotDxW4gitouRizcxruXbhrsLPG7YxQUYE\nmg2fkU52Zgzyx9ELUgTtgAPgwr//sqVgj5iyI5aIPQOXuQBmYQTeAR1K0N/a\nLe9PQGMb4d6ueiQJj/jBvA7fnS9Erk6j3cYcyByv0UGpyRTBYb6wIZK771P0\npfCK\r\n=GM2m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8asjjMBYZFWNHNN95PwGJWH0iUEhCL+PCpy5/4MLwUAiANnxEpafk5dOG4AP1NDaaNk+xXKDVzrod7fMHtqsQpgw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.cdbdf807.0_1588292090847_0.3050511677077534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WAENAB3wcqM0htPQo9EbcFvEHx4cc/Tjnz386JdNElzAbA6GX6YfrUP8ebFhujFmADx95UkuI55aNp2s5C5CmQ==","shasum":"332044c7ef40b6fb5366d53918ae86a02c39fa14","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4yCRA9TVsSAnZWagAAi4YP/ix+msogrXRXkZ2sIFcm\nBF+aXOSfD77tO4LwYp1WgeOlvQzvIrqgLtypI9nXO+eO0kAj8OfUbHhJXvZ7\nYleHqCCwHvLuGFHmq6bK11pmnZbuVfgljj6vu5xKTthDm5r3xAFtB5XtA9S/\nMrTPImnXc6GmN4c336CtE2wXJNtl/YVMARzYmbS/YZE3ZH26KnxbpEFv0kSH\nctvpWXH+efloSWrJidrTuOeptwo5l0EEF9lR1YDN5podUb2ZgRIShryvya9e\n3w9mYHSy4YHm5iiOc40s71gWEulgJ0tiuzTYFmMV/hz4yuhL14QmnQpVCLKQ\nqeKrdf01WuxRv69cwS6kNr077fgiuuapQFHH8TnqTr+tB6TFoav96A8aBamt\nq+8P8sJwEqw3djnp5u9zKwTH07cP1LjJmycYQZIILBJ5NpirJOGXaII4qElm\nFadn+t/G2F0g8VVL2AbTBPKpuGIvon7P/bXi04NDMuFs0DGxqOmFIqrDfrRq\n7wmTJf8B9eU3P+2tIuXMjbIptXe/ZvY4HJYOCYKv4G5+Wk/nn3Mbsp+Js0kF\n5dDE6FeiF6ReAk7l01v1VyuHkLI2nMhWLVoDLTeMVShmf2ElLGVL6r8Q3ncp\nWIpwO86pEDYe9KACD0OlLHTrKgTnVSfyu8lHEGcseMHYb4KEximlBQa641xD\ndtnR\r\n=d86e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxEv9uVT6PkKrXh68AWTJMZ0eWEhD8Ythrrah3/6HAgAiA/1h+l24bQ5gkhjzWg6ztzgGOVrg5xCeqXFcqje5Om9A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.9995ae17.0_1588358705664_0.5751123942892671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Bad6kDZFQnB+IoPUMG+y6fAs5RIKRe3TVemyMdJ1oocxEysYXLV/MCbX+oZXNCvo7f1E5rtcVqroudhyRReexw==","shasum":"aa8817156af3474ee653179cc677336c3d78df83","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuuCRA9TVsSAnZWagAAuz0P/jbKKfyYyP4w+d+GeEE9\n8EvpTlooUmsAc4QH2lDI5qjh4GqUwO/OYsQRnONzhX9Io6BZlGab6Uxxoy/k\nXhS2sOezz096oYxVVEjxNWIEBS6+xuh9qfjLJVUGlFPmmW9rZc4i8iwU1XEf\nXnIPkYU3l1SphH5rROPV5ZSAiZN1SowIL03FezGkVMnCq1yAcKHoM1YUKu6e\nd9lxsdZNcc2AgeUF3SZCuC7aU7VgroI/liQLTd8PzheNMTBycRWdedw4O8jO\nBhgJo1O5CMKWGIukiFfHG/PGHlVdo4jaI1hVQCQQMY8Qg6wdqryyhAm+vDUE\nOB0lwtvrbVt9k2xRf8tIs+Y3G5laF83zhzZ7DUJXnApAHz1mr1Fz6mC6UWgD\ngpxq/mqxlXRYI2POdldWX0ztA2r18JlOk9qUu63AAUGjI9soGCtPYOKva6Me\nGqPftiIqKyKfhdTrMBqVcmRsMkRnOSL2OfD/mesDvcPlKQ4dUGVx5t4SsQeT\ntMvPsmXZaL0Bp76a0SkDRgcdKCKtyfAkj0EtupIGkom75AcStHwYOs7Pe/bw\neY/rbMIsRZGias1lAp/3lhiZ04/QKG8GOMrzTVGny9LJNPaFk8P9iSMGsMLO\nrpXetbvBzsiu9ra4OF3CKnDyq1/zC9kEohLc0KFKlJIWpJjYBcjrQm54vrKx\nA/LI\r\n=iUO5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEm5nao+sK9vnL4viZqY1I6tQI6zKQ+0xl55P2aUOqW5AiEA6zRkYOuM+IDpmctenitbp2D4K0cTxWq65ip2slKhfhA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.457bf035.0_1588366253786_0.20331357518474902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qqEgRGTlv8nquPrcUN2cLrI19PT7BwFee/vpoI3J6rsZg0aPQournU791ur0EuVBGGGrN244Y6sKw8EkUWN1vA==","shasum":"093d1e6951874308994783e60f56c049e0b6c757","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPSCRA9TVsSAnZWagAA7m8P/0JViK29laDQtbLwDFE4\nyQq+CqaPe+BxgG1tzRRt/VD0pSQBueRuKlx6EK9nw5gj8AAGeJD+MR9aH6yF\nuk5MNow39aCw0nGI8K6Impx6zVmhMniu83WnfCVIVAuSEu3qOa4Rs2h+UK9P\nanBYQW6Rl6J1CiMy4+eN9BQgSc7tN3bPFT3p9KpnSjUdZM0kEWsjTkxkmo7L\n6nAEFKuMizNp4oJ9KE0qKm7sC+lYI7VgPujWQfx7DFv42tNDfTpfuI5qBnTm\nzpBljb6doxN7n4nuF4NGFIoTYYDbg0n0Oi5SckLtPxPHWl/XkWjQ6rNb6jTS\nbtWMqAZ7QfdpSvpiNcn/io5DbfShPTIXtEAEj9gqqvkf1et5S9sBWOBYeVCm\nkb2QNiqJB48ROS+fAwe9jMXYiavBgWDhizh1d3lgwkRfXJrJDQJWJEoeJ0+V\nU2S6GeOvna64f5ieV+8Cz3rrvce5JmXyMPWYcGxt1v0A8MPhWIw4OFYSw0zt\nvfsup0jj1bcG8Z0nDJy0RcimQY39iuD3I16XIf7RodmI5dxVCpTENh6tz+O7\nI1rrroarjXDnMkvxGWmfH73f9Mp357Jr1qkc0+4HoScvW1iI8vfdJrF9tGxZ\nctwVnhh4QLIWr1JvRRj5g2fmtSfA+yB3oRhQpTqFrIBFOrIrhUnp4tIERc4T\n/39i\r\n=sikS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFzHXW5/6Qfxt1mjc3Hmgd5Eb2a/aco7Ewl5c03a60YgIhAIX2wQ2OcLWoorp4eNtTzZ/q3hl2aMY69MO3ZhDkRxZV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.2381fd02.0_1588368338019_0.3921190947813351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kHercCPK6vaeT97x/Drya6v4+am050PgZWPgA3ISxoM7brjQx7dir+udF7oA097kR3jmikVyt4C1dFG7RFKdcg==","shasum":"2bf84509401f4c21d348895e178dc8f9a421e49e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZICRA9TVsSAnZWagAA6TIP/RUs37qedA/9l4NED2kZ\nm5rbe2TwUsrYpLgYDkjgoMMEfmVz3dIuQcpvAZnMbzTGbKkK5NBkOQQ5JFQ2\nZvuKAMoWLvMM1gZjp2aqfUWIP2ip/HnNmFfmvH5zwg9E2OeAKUgZF/my4MoV\nHtrWh52Gx7xTDpSXb1ZG3v6lGuxXFo3tqGdv4neD8HPZpqEOHjt+/p0FGmqc\ngAo4XgaxSLyM5xcA4VwoRySRWDP7N87qiNoqhVoOtlpUxB5PK9lZR9FAwvLh\nmU1ecZaiXxyBo6vSnuInmEnq6g2cPC7nVjEQLEF0jJWsqe5Kke/qLV7yVW7R\ndiccsS/Jf2A9NVNWyH343qGOOZPKega59ggPE3CILtcIxjSH19GAZh1e5M84\nnhh6x48bzeTgseqhCuGK3Qg1hBLMEAhmTkOhHUWQNlTJ9A42QluMZdCDC47E\nCwDUdRGDv5N3Qzk3zvmo/WgGf8QJoNHLZ3xZJn5ucbOIFSGi2N77ScpbIH8m\nfXuS1W1M6ItvcZpcYwsNQa4QBasnLyotxK9KEipJicpNWsPYaX2g8KzWBM5V\npCN4i3sOVMn3V80/m3pMsCVZQRkR67wMh7vGZmm9CvwbAzXlBwftJBo0ykK1\nXoMac9N/DPApXC1Vfi45IkRYqElI0xQejFKyC5dAg3eRvSWtjqI8yPcTfgjM\nohRG\r\n=0Gpr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5wmCFy5B4TqzR3p/mCzhRLNNcZl86dJ9HgxSIytQNUAiANeimlLWYdvwwarOeiejZ5tRAlspnJcnR6Lbaa3As9ag=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.b2ca9b57.0_1588368968121_0.41295371981358353"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZKaGVIc8DyDqqAXxecP8RDPcLHgp8LuGhgg1EXr4FJSIiigZjNZrL+mxy/MYGeoRusQpwqXuMhgVjqPiY9jLXA==","shasum":"b56facb906639425be107449dcc2c9d786b52022","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPICRA9TVsSAnZWagAA3LoP/1pvtg9g6QwNH5NDQySK\nNMVqeIDi1XS31NXFwAaQkWXFARRBmJwwfJZSMg++B2mXj4oheAnzLvqgvmUn\nPAeM+Z+W1/jX55PISYroLsZiVSUQsYp1EjyaDG2M1raMTbVb4/ZJoEVPwGVt\ntqMq7098J6HbtwxGbWx3DdOr7dVP0x6T7qW0dsb6f5O/vbanV24Agu0Pse5X\nCXZB9mQ7S7tAOs2OS8NX2BIPmJ5Kpwpi+6ydZ648odYisJ91Jq8c6PJk/m5y\nIccVQUcfMb3mO0Vn4GNZiKcRFTV0i7AGqZgOKxzl8jBXPjZ6Na6UWKM2klkw\nA/aeNr1aLAzlbHtgrUJfvul1Tvdtje9PK9ZrAf7Kq3+enPWlgP6Corz04GGZ\nkR+Xbytesee/MSa/tOi2NFiM07LabO6zrzPc+ChXI62uoF9AMFvuPvxv2Bud\nKrVXi91JFFRq23dAqbiGvZbAc8zrGzksLE4TL3oQxw0oBBb65Cy2MKwdOsB9\nekGMUUQkyhze8Y6djAm3SKbS3NGW4iogeMrvq/GIwHrs+ZB8ehZVKjzGu5E5\nDxe2bVXul/sNtaC2kqoLLZ3qV5YYLIzeooUeQqzpnyhze73jWSOhthye8gOF\njrlmsku5wlnZc8tqIvrs7dSTMnyMPNpJm0VfXV9QOAo8wv7s0e9tOmZ4Qp/g\npLD0\r\n=2cuV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEyHpdoaBoSJkfJNmFSz+f37ec2VtA56lljxJ0N79ZtNAiEAsSPEHKxn+DAKPrdharfN2qbKAiBRAFg7n4p7R0IrrQI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.b2b088e7.0_1588372424066_0.09936834789720406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KO99YsZnAP3h3ydmXjHzoXnccIFAswVcwpDln9ZCkU9h0rRGHmMSGLR1KMISOHsXl9rmJpNDYnG17TaN0qyW4Q==","shasum":"39e9f141afafa502f15e1a6bdb4247630b4c39d8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvlCRA9TVsSAnZWagAA8bkP/RxpgVL5eNQBOzLLz0jO\n1qd0NSx6JkWWjG0Yk9IAjTRS5E+UUoS9WP4mkw/WlSYr0AcJ+/03DPC7m4oF\nUbDNjiNhea6xDK3WTJ2jTVO4108RPkh+By3RemdmmRl3dfNdXR0VRvGOs334\nrR5EdcFDio43DCmKroVwFD+wAgGnfL9VAkFVyYwuZKB03dDWBAI20RYSqViN\n+IFPpHr1Tak9TmN9OUqC6fqSXaxZnc4KcoMWA8qdw61ehR7kIqxZI+BhHxIk\njrtSb7ommk1+4vY828TLnjJTRFLTiqem/VihoVUdgCR4VHdvSEzmdLC8THCu\n+qPA1b0EgIZfWKPmmyYhUEA8NTUp93hAYuH670XGXMEADkLTU/fe8i0p9klP\n8T98McCuxyHIRIJE05LBcIFF4D//1i4NK/DKw7JK3hklpsToujyP2mWcbnCQ\numWOYsPViZFu/aUMpKWi7tM8lf0cRcmz6dqN/fAqOd13UIQDqbjzUuxR0L4z\n3icaPsFmS+otOJf8tGu4KycKiJZLVg75BqIrErcEdozXhlEPX4KV9Ys1Ji2m\n+MAG7Pq5uv6uMtkZzwCRRl5Xu15/3BqqPMnb15vd8tqHE9e//mvEmOlGiFF+\new/m+/C3MxE0ph981JLodhCaJkPjEBLcMIxFnh94W5s7hRhzJ68V/ynEpSMk\nanlM\r\n=s6p8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9PJhmvKVs6mbpuvsICE2Mjwolt7SVee4wPKMqIv9kWAiA+muR37OYLPuknZct2XfM7F5CoarjWQE3W7fZP5NKJ2A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.fdd8f69e.0_1588378596712_0.20057047639812842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GCpy30xoPr2Lx/u+EKYpnuVF0D+IZe76UiCH6l5OE8tPC2CcOULhxlCgdjyOPIGhe344uzz4xBRLF+GvksWkAg==","shasum":"ac434f74dde6ca3be870367cac58df239effc6a8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1JCRA9TVsSAnZWagAAC20P/1BufJmEPSPtXbUCgda9\ngdlCa+2ayYpDjcF8+FmhIOPhoptbPQPyee0cPFgkjKX2iIavdzCevNG+73/F\nOvugG6sr+JHTZ5FPLoUE4G1UoizGQYGYmQONeRKrsX40UHxj4rN9n+Bb0JAX\n1rhb95Glc1DxFlC9usGGbPg4K1k2lnFJsrC7VkBJMVKaJn3YA7JuVZ0/AfAJ\nEhxuid3653y6WVwRIhOMdMjEMDnPAS+TRQ2ZtLvybHHoxbGVpm6Eb/2QF6tN\ncSiMzpC/TD5gx6pgSbUJ+qS5r47jJ8maj2Iht6kSlVagUQjYh6A06ZO5b887\nesfo5/JMT3Woq78LutpfWKDvmqjXxmLdu3rZ78hOLLnEECdTHn1HMYxu7dQG\nuaL+E78BAqjDOGhvssqQV5emGSccX0RvM2GN5XXP8p7X5OcoKJLYGdA+q1X3\naBrT9+witjxWgFOZeWEJvURWSa554w3uqepRqz7OCc4sLwL/83RtTqCJvqtY\nES8l0J7p+jqbAUqr5pkFuylEDUaUzTAyqEMnZM63IQ7RDgtZrlznCnc9ekjG\nu8fVeNna84PubY9RofP44N14ZQgKFn+Tfwc0IwAunf69aypFjloW9/2ld03Q\ndu9avSo3P3m3MT82w3OrvY/EIbY1U+Iq61bcIjGfmnZAcajZ08xgc6UKaflw\nAoNF\r\n=OVJ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWbluD2mfbk8QAErwL4WSbfdWmOeNFJHDPjVkopFY2YAiEA2Z1DH+GnQv0Ae8NwkNNBaW/xx/djfLF43a6ovZ2MVBA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.730f45a8.0_1588538697090_0.656484090933984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PNuo8D9cLw35kjCrENaTmNbCvKgT1RxO5NMauSWQNRNH8p6lyMxU6xWVjFkNhCOMwpQ+nEHw3h0/Xl/N3gOz+w==","shasum":"486444ec493d4a6136b23f1c411608c43c96485a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKX3CRA9TVsSAnZWagAAid0QAJSiIJhRJenNoV9IxdG7\ngdrboToCCKNeAeJSvoO4/+ZXt5ml6ko2ts4wnrLrxGnMc22tvp6C+CDw2LZJ\nhm6guOpZl6m8guXY3GOT80MDgMGc07t8wpHvRMzW3+eITf3WjSPGDnu7h5Y7\nR/EbTUD/Co7B3lkpJa0lfhw5PB8+6SvxaFZqtBaXilR8WOZLi8+StOxVAI9Z\nBpzJ31qe/+THD4fLFEPfgstZn+Sc+lkxq05Nd4966PSexHk45r0DSH3OPHtI\nMkipm+zOilEVYBIU/R7uKNA5B+ZdaKYFwKmK0Fvmz5WbS8T2nULqA0OO3f0a\nL4PdoIq5s/fTnEGPRO8xPQL3iP8AGSh8QEpTHdxEb1Ry/OVbtl+RrcXwDLDV\nMFV6RRlyo3a+pcyfvXGn2SJzl3ZaR3vt5XrJc/CUVEAbaPs+lKI+Pe/WnffQ\nTLDmYJAie3TNbVhgoxqhDtOyRMdDyV1CU8VPpbkgbl+eQBs+DRR2HcN+TvA5\n5fqhobXG8ViszBtvuf7R9uRPz9BBlt7N3n/KekFMWu0sph7r3KiuqMAE2cAo\ndlsZYV0j5igmqCJwGUkJHmd3Pu+/WEfkFscbNnDgek9gOIMFpgHKspeg59gW\n5abXVhZjHShbW8tsmE3baLszLHL+NmW5DAFC7Oeh9ZoYoPxL5PCmkoHMqF1X\naYPJ\r\n=Qo8a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3qydVD/GEvQtU9PjvUbSXLyQ30IZHMF05VvaG0xcYrAIgYKN1cIRlWKI9IpNxnIT0mJX8BZop0EdfzjaKjDE/Xc0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.4219bd20.0_1588635126784_0.4430761134414416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DAOicc89R8JLxKHRKj9aee8An+Usa9qpCWYPxRDc3N32STJ7Zcz4WN2uCEPQ3i7rwsHO4MkpgBRD9RhTOED88g==","shasum":"20fb0e26636fd695b11f06a19b66fa25cb2ead57","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5sCRA9TVsSAnZWagAAHKsP/2Kw/pD7L/QETgGTyoYj\n9ziRr/HPJK+fVUaznIzm0ebR5gAZv98TzRsGYC/ufnEF7xA7h4hDQiUze14d\nYGBxhtUlMnE4fZ8nmFkRtjVfcXvB0Ys21hM46sXu9T3sSec/Hw7FXpE7pY78\nC0DyDRiQojeDWh27mR/XUbOvYsCvn0POJvdJR39nLylLDagNZbpsCsVlv9N8\naFd5KDEqdjtXSmyPQAk9fCU+aM6ztJ1SbwS0MS5RqHpn0trUZZF0xyp1cHLA\noOIdieeor+XL76MWOeYjaSEOkPHIfRqntXjnxNbXu7TeQuxrDHz9cUBhcOUc\nNVdxvXnXWZ9Kh+igsKp9nTlcxb0BSEsNiNyEBmMgDkqT7IfQZTpp99rw7uaK\nDL2MwREXYpbtZmS/j/LbJ4+WoQXmBMhjf4hFayufsKgY/ZyNGat4qBScLV1H\nG4xd5tt2RbxOS1Vg6vFEt80jnIOi6kykSOgeZ6HFGvZQFZuejnPMuTXFvlt6\nDP+PV/7S58nvAbZm9VdPCj0sPA8JFmMbSu5mVlIeBbpnp0sECeJQFurykPGB\n93ylSGN49Q0GCQavt1EPqbUCFM8ovu+T7nlp90KOe0BkmlaKspRZohZPeNY5\n2x5IU60Gryd6B1ZrJUjIYisJoRiKTddoyl4dibpK9XVKd+bWfXgJETV0d3jz\nJOiP\r\n=czX7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEtaWF0iEgq07AzQACpG1c1yDa6zyVIYRaMZwKczgyQmAiEApuZSbT1jFweiJf9KbMMFRCVMRI10qMxQQcViwI92i0g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.1d83cf6d.0_1588698732609_0.6935260435520632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QaRTp+s5pEONzxJDbapRHIYKn/pzix0QM8lD7HWMoacUhmfonwmCkOCmiq2m6fMrg0FYvHkFUvyEGqdTvWc40Q==","shasum":"6c383cff33dc6a14e00f9aef40f988e42ccc72a6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazfCRA9TVsSAnZWagAASCYP/3vg5mRAqS9/tZXAJeCV\nWAaINCOzAmB0qVA3jxc87XJztYOTpoYcyC9xcBauuT4pT63ZFjhIFyymYFfV\nu5lQsm1jR2V3sHf0sA2ceA/35iYE+VaZmLNfTwvAwezwiDVuaF1hyEi0YfG2\nML965t2H5+3x7dWE6faGHtyWb6ZLOiz849kDnWJzwi7JrE3nnRYACPTg5gLw\nqzSRtkDB2s44stOzis08TOP8UtVk6Wc3t6aVt/hI410I3AwER6PXp50VxfoC\n01NwGOO/NPKzsf2tLkI0Ov4XMbjDkhoBwjdSuDSSb3D4KFUvVPfodnzkkrmm\nnt52whHC7yB6VFVClzZBZ0edkQ+8ElUyyHdOH74hNGwaBBmxOFA6gETX9U63\n4noMS6gytB/wotWHuEOX4xuKGz52Cqz5A2XPF531J1/apIyvReXdgMmJtsCS\n4V7HK2/gHC0SiEFJ6zUVWHGIned+D0PXXz95wAQR/rhAEe/eYdNHnD7lNpoK\nnhouKVAMYkU7s3I4Ad0/b8uURQ5bO7gPBcE+QCbThxJmw9xu5V9CYdm6enqV\nSWhgpc9zXkZSVZaAs0CL14LrEVkh5OZw4lYuZVzPDMRW2V4Yo7Sx2QffnyM4\n7MIhykOck8WFRmUYuYuC3D4fvBPnh5UOdWnMQ0LrY/c/L85eAcJDPvcL8Hgl\nzBR/\r\n=IFzk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8yE7XHU+AeUGGTlfUW3BruHydfQTo7H+Pl/y/Q+zJvQIhAK+ITnRDgShs8Kw5lgnYWaaR+P+N7JUOS0N6eEkuQKtn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0-canary.3bfc63aa.0_1588702431045_0.1046625011979605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-VejrZQgwAwcV72xOBaROxl3GQVg4nqczaxEZAmhVCJ5DNW58vhd32xmfXAtcySjKEROZbyIo24e3EZp8di/1Xg==","shasum":"b0bdd664f61250e4f3a593ca8656cdd37bb3a487","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.15.0.tgz","fileCount":16,"unpackedSize":61084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepdCRA9TVsSAnZWagAA6MsP/RnBdk7+HKeJOPlDGOGr\nWyZ9etI1nbkfymce7ldW139TgizxeC4k/te3L4aqT144ubAIApuErJ+ypJC7\nYp4yDeHBupdoxiePwI54ju6zbhJj6yDXnomVMDKGTp2fLxSbqFiH5UWTIAjC\naYROKFW79lZvHmXpDvMahNnE0MAxWfFq/V0+nWEf8V3IwzYR4ilDmmeWvGCf\nmqowC4lqbfedoRE0kcUmChDxkdvMw/yp2DbZewUSTalhdiyFO7pigi+mcDu2\nwlWfYq2kGqXlCwpgBrOdOreD2lToOIT7z5Qa1m3Jq5FOAszxd4CfPvkoM0S2\nRZXrpgLabp4f6/UTxE0yZRuh1e3zr2T6xcv0lZR5B1ByHoEgUPMjIxeF4M/R\n4Of3ri1iY1tyoJO5bpQjQDTUISHJ7R9oK3ksdnmY4d58fGleJFcUoOjYuL1D\nuQz+sA/CXJt2Hr93d0srGi6RGn7djSogJ6N0EZjtDuB2t0skOPY+GG2r+Tss\ntJLs+yp8KlPaILt+4PChEKkVCZRYwDnTk6J3ZAKRWxIVnrRWb1byKbKhHTSZ\n0n7IeI/vgGHhUUVjoI/kVq11cu4MR8ikKmQsAWB1ifG9VvclE0iGTAREMZGC\nSczj18HD8JgSGWGalu97TGdYvpT8R07y+K5SYRLwonYwiflzdTYgLpBxshGt\n2bOG\r\n=Qagu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD+Qjb9iN8CZcY+yGQvB0L+qEOqDcFYEZB2BVVszmokQIgRZui/RmnTpg66VdUHS5XAnp+yvuLgEzPweTXa9X9CwI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.15.0_1588718173346_0.22951560451327158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-e3CQi6HqEBnDj0lpSHLeqjBPukSihklhAqA66xSqvLly5hvXuXTiwmvUJbUMiI3y1f+6c3zIMveeGYdmliKC+Q==","shasum":"9bc81ce70de3edc47bde8ad18ad415dfe6da5edf","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRwCRA9TVsSAnZWagAAAFcP+gLNfzYlSWfV7PsKDKTu\nZuwyuAyr3TayamHuFGR1cComC/Feu2yhN2AANMh0asXMB84qyyc3TpvEjdcf\n0kBXr+y/47Sfny6IVm/n8fPayJ3FEuwzWlpfLDQ6h9wYSPNtGXWfgfOATOKd\n2xKJlzhuNRT5ZGWNP5oSxHbQGaFnNJNe/H/sLfYug9+fuUJ9muzBGD79KC+X\nxWqtsN5bY1LpM0V4txmgrWWkxihr9INRSXE5vqBRi6UPCkH4YnPeqnWBgCx0\nOZ3LSR3wWfrvYKEtD32qgvM76j/nSn+G6lpiumohjKqKTQhhG6HpSfAKXlXz\n4ZdlLoelQ21J1GslK5B5avNBfJr0IjS/nBKxPPXzU8XMNJbSYwo1UrWJRtTO\nmP3s3nMgBc/35gbaTgAyTY0V1LiS6FXJLcBHDYbhyCnTtOeC1RhX+3CYyHl1\nX3gXuhaVvMOURkat9/Q3gcXCh90RiiksGKUam8PVlsMJXsU0Q7dxPIvwaWrj\nkLX5dBhG3iqTrqHyR5PqXf7y3INICHPne9tvQ1gqw4VR4Ukhvd6qVjUb3y0q\nxSYwtb1AHAT0veIaTNgQ7d2EKwtQABNRgTmpDYjCx0XQawJO4pj7mkXhTNva\n4W9zNO5VOO6XDVl2fWcbQCt5+FNhCRUFr56cMI939glur89ZLSW2Z6tECdX7\nTC37\r\n=E9cB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDC9zEtPXgrHjWK2oFUueLAEueggsKwTsq+bubDMb76cAiB/ePamSHjYAe1yYzserGynYsfazBHaWZFbuB1CjWbD0g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.1f4e3d1c.0_1588802672385_0.07470551243263102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ec9JPT9zm1BRlRzY0y9TiIGAcBls6PF3WJ9JNoy4aODEKSYmc9vZZMCdGeigMmQoNYZzzAACiLp20MU3clXD/A==","shasum":"dcda012994a5a249d47dfc2311432a3d0a8ff4ca","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":61153,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZoCRA9TVsSAnZWagAAUs0P/jjtRuJ/v+/yuci2gEPr\nga13nZBc0JceFyCIK/1CjhlLDY6eRaF4zidLN91YQbBujq2dBPly6bmGFnQc\nU2c6CWMEK9Anj6cPJKaC+P8/Kweh9DsO2DJBzTfb/J8/tAOHgJqnZBBAYQX8\np23B+39gUFJHFinYSMzQYuofS6Wkf/nEIT8s/Q/d41aJSpmNo/feOaYeGWq5\nXMZY6fq1Q3ipt/y8O8ujab0E8gNpKqUDM1f2eXPWWNmf3W8tB1tlp8NVpqXh\n7EO5LVMgcjWQADxKwwMKtKICwrzDBaiKFeMZDUpjGkWSC5g4qBwL4vDJxZdF\ns3tgKDfD2+vp7pWIViQfYpcshoEnVrCm+YKWgPAu+lbRpep2We1VWcMBnFDq\nXAOfQDkrt5FGff4re8ND8V8VZucb7VC3IqIozP4KZwaqz6GJ/ov0TPisZF50\nt2HdJyqNDD4W0rPdjb/ZvRTVB5oT0VpXcrOwO3u5mgobM/negsMOW6JVjTk2\nb69qIsp2/nwADfGrXwEJnooSGeweP1+N1EHO0hiM5lI767Kwyw+hi6sZhrRf\npWrezVI/8jXn4EcDP5N4cCT7msSWsw5i+Y7VRC6G9KZCbwW5PsiEyshMM1Mb\nvEbtPfmyUD5sQCtKBOkX4Z+OOB2o43xzssZx1Oi1SNcy50eduk6L05+Dfqf/\naVvL\r\n=0pdK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClkctWkhS/8WGi+9Lp9rIQya1CdKRBD8Ex8xK4ps6OyQIhALB9i6qZnMA9PslKG1NyOq+KzBu8KiJmcR6HVHwl+JIe"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.bc8759d5.0_1588893288084_0.832003861872068"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OqbZgv1XvIcFEMJDyN3cnjcaGXUdNlPE7V7nmTVjd1WojhoHfRL5AZfYbJ67SiN9kU4Pmawl1ue83Sau2chmNA==","shasum":"16ded7887e98ca1331f6bb02a2d43347440285c1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZm9CRA9TVsSAnZWagAA020P/1IdBQ7DdAAAqZp0kd4w\nSeQTtslQMpM9fZandijs5FTGioLv96SmsnxQ+fJ+X0z3qFPQKuiJc7sDGVK4\npeJ3/n+NDeallrO//0iiC16oRHj2QPXxZTKmqRop2TPk77yGCYcIYh+q5fvi\nbzLwiovDLBO6sfxWdiTGrHSWE+ZTBjPEb9VC/fCoh/orITrmTmL72o7sNEX5\nq6qNwOerTPHthXjUhOzPzfK/I2PtiJdjF019szICIDYSLTYVggsdzF2CocuB\nzToOPjcydievrE+4zmlqqfKNSOK0oPfUk23haBUfRMonfqt3b29PQFunQQp4\nRiMUL1U28EGUH+D1dprZsg652Fv7fZbpFj6FWlwoylqHgJTvED/jYsSCPza5\n0JuUxm05VPjYRhkkwGCBCCL7KKDmuntwT1QKa+HJxLQa0MSe3sjpWOh4DVOq\nJ7ntdOUdQSaxGvus0QUIPuRxmLU5bQiFh29nqi675nHJ0kuVQJ1XK9ZhWSXB\nz/qaDoNwhS+38tZNc37Q/+TnR8HqmtMNkl3YuwmNSdrstoyJsnDn1gnGwAwY\ny98gnzJ6kmsKMJJs76x6yXFRNckk4t1i+gziW2Lhtbr+Z7ccnHN8un24iI1N\npSTvgcLaWjh33dWWbshxeNV9ZvciT4phta4rbu+tr6mtgaoWaRAbzoNfAIsk\n85NF\r\n=1KBj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2kepXmCKJ54AN7ihUPcoY2vpN6YPzM/7mBJ0rSJif3QIgFFWClhD6ZSVm3U6XFQKgVXHbo089DafP04pxO4NgMUU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.d1379acf.0_1588959677242_0.08270340752816274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WvYgDzf0yWtar0HZcgVP2VKY/ID1NHHYZn9QooIuP/RWAKDD5U0/ZbjyWXyYDmhlR3QlqhQu8pAhbD+/l0n4qA==","shasum":"95d3a8b28c724d0f3ff0409ecfa0f090801eb76b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBPCRA9TVsSAnZWagAA+I8QAIPscArN2vZKvalV60mK\nYlUyAxi5WJUm/rUNgnaDT+XsZgQaRDSUBpCtnFJ8E6U679U5k6QwmxA5L5Y+\nRIyQLHNZ9vNrreVmC+Srk3GjigQhtL9bqbHLqSt7H7a10uRkkbygnetQi2+3\niAx1eGlRMn3nlY5km4fO3pjBCNvtqcdLXCiEgj+LyJc03ou2Ddad83QLH3qM\nRpHbRf8rPe5vUBsTX43UDcZx4g6FeV0f0p/26Fv+GwLOP4us6AcH3mfDwCcO\n7cQ2Kerdg+E7RCdywVo+nyLAWnFVPgM2zAgCJATaEDRJbc9snzgMKhlb2mU5\nyPPIOAY5/u0BrqUp0PXVirqBfLynNn5h7FDTA8GlFbaDyWBFMvg0BZAZut7Z\nesngkfpElpiOxi8ZVV7yiHSlmcUnuQ8I5C5yaCnyBwCn+EM25euPiEou/Yeo\nJ7Y4tTXjh3yurTrQLo4+dXA2vdYNGOeEA93rm81LKorUCzr5WXbfvkVohsZs\noCeBExx/KDySAkGMsaKqzdOp90Xav/0CGuAN4rYEGY3UgZSiMDSWEbSAtxmy\nZq82nhG9dIEIl3zj4AMf6BfcYRcpcIhR/DdJ1Iqt77fqvpLIso1lqs3KRppJ\nCIKMqIr8eIBn2TcFC5C2RN/mGxMohEeX7XDcR/muvhZW2cYQ72VT1PZ+4kUN\nBXCh\r\n=utAk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+b0wXicY8xmgw023rD3jGaT43XHPd96liMqTsvUV06QIgbEvG94aBqOozJEGH607sSFCRqBtjKSDGP8xDAWgZcQA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.58d51fc0.0_1588965455218_0.7014801923268863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fyh/+jeZe4UBcR0WafQ5n490NdsFvVCnLqfYgd/L3V6rvNnRy5pUq1Va60EN0pxScb+F4eTOU4YcJz1RU/e7Sw==","shasum":"8a7a83065def79dd5a9be9a9a20e4a5950b10398","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3jCRA9TVsSAnZWagAACooQAJnnR+hdWqQtq97ZY28c\n+bB00grgzpyZf7KBl1CnRM3JOiby+BOpcdWQlRGi1Ixhw+gh8RDU5rwY1p6l\nodMS3Ac8GffWLYgw9GW49Wt7SciXCG1oXCCTSqyyptWiO9LiwagjyPEHpqP/\nZU/q8W8UC90sLFL6mN1FOVaL2NaGEx5Kf97BvlbnhZTW7ZvBMewJ6oZXWw1c\nBqWjZ+qu9IEgPdwn7HdnDbyjPc/rcDnmOdTfnmeOpX7H9GuX9cNVDcjJzJy4\n9gWHocl3Mh8Qt06uWGhxCErePiNJ2h8EpFKgOoi6AsdUujCe/8/02+MrE4bw\nAD/pZiPO3ftrMkIWcRdP93EZdJbI89/H3ZWfpO2sZ2b86KdhXbpKAia84LyX\nqHShNnS9tHTZW7nDxFTW9gnD/00705tl52vDBDn/si04npHznEvCwTp3WEgV\nhopV7rm2LVirYCeMC5TdMDXfdKYPqcZnrQKPAsQWOAIYJ/oBkj1WJ9+hWUyQ\nGp5naj3s365B5ld7V9ozXvfxlFlWZ4vo6Ks3AVcEDZAkENtIxd9tmnGe3+/6\n3S3nES/4iWixF78OwjGykIAIf10SUz2l+8MtPC7XGBr3P/RxOgmFlR8NNkaY\n/9Y6GUnrz18Oum0IJYJWqC/wbbY+RvauB7RZN1NCpAyiU//LcbtIpUYTSw+b\nIu+R\r\n=EVI4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk5Bv5UFxRAD7ldlfw6adm9JNzYb1FDYKr65qwvzb7DwIgWGunGTt/b2J7X/2aqZ8cM2F5H92Kpy2aRV6BtSMCg78="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.588062d7.0_1588973027495_0.2544761715411652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tSybRlDyr4PSIDFzwUOC2PdVwIz5aDox2wKIVsRAT/G2cjESZqMnkDBGv0JTI6HqPl3CVJW8lg0gmMJvFYeIFw==","shasum":"1a7aadebb1be0420d01982b58f64dca649f310fb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYuhCRA9TVsSAnZWagAAjuAP/1SsR40Bq2DsVe2rImZ8\nBl/Go2Gslx9CyO3Rbizmn0jh2g/+krpSVl21HWlRDySUWUm0KmwzK4yItbCu\na8ZjK8krpw8DdTJeHAly5JNd3L9zW+H6fmXtenzvsF6HhRJI4fR1UcSJMOW6\n0RE0dzobP+ZSjSWaYORTXPv5KUCstMrcgbcw087G/Dq740P+/atOX/m75pb+\ntFb8deB0BhH8NKvYvGmtRnuE3Ln8ZpwW42fPdpU07z9yrWNXxOQxktbfMCao\nfFgAsmJtttJ18gcn9owcR4UNCk4sJxcGXPiQ44DX9dcvnmSqONcdtuktj7WF\ntvFHwXBr+YRnUIscqtidZ+YnYoxUHikQq3Q9Z1Vlhkd6e9HD6aYKlWiowBFw\nol+3OV7jVjQ2Z+tI096wbak8eAHCNUz89IHzqlo5l8f4IjGBRIfm2e/qLhrD\n9vqxvn/Nc27kPRDjkAitWIwD96/FGvwcoiisEDDN2XGWZqJ7/pcztSqOENRZ\n22RrLS+Nl6bCzyxqjPYxYXIc9jb0DMIXV1+Mj7AZCMC2mcnCdFvn9Jy+FbuX\nf/XBjooYZIraFMxx7MG9Pl/Tj+bmtJeK0Qwz2CiEH96hIh5J/le4c3DZWdZ+\nkV6wGdWEuUhVkPFP9/Y8QIb1rHjiEwBh0Nzl1XgRdVphtHvNpp4i3oPOsbLi\n/wIL\r\n=EGbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxeJq3hwQj5Rk1TqWsQCN1CNos+n/590sLG/13yIac3AiBkx1UPo70pBnftOnO602KY2lIdrfzm63sR9egHjUKtwA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.fa21f639.0_1589218209441_0.17655377461349198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Yot4GsxS7GCxZrJjxABhR9ff7oto+C6sC18yNDMFkc64heJYSqtbIyn6KUv2c2+gyxSiTPnDCHqs0BlUwsSR7w==","shasum":"6cec383ff98e33036d4f2e39f4fb4f136ab62288","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZs7CRA9TVsSAnZWagAAJmAQAIOw+rBpo9CC6VXBgrfg\nRPeNcyv/IAb9fUeccpCB+0993F1pcnEzf39IKyy5yoLzxDKR60esReYTV+2y\nGWWSTEeq3mfdFr9yXs2sGDrnH4c/zCioDjg+jo9DWCyhCD8zguaIovD86M+v\nMwqWZWoGVWBvC/oejo6+MwVmGKvE5Wje+ht64ya75AbVL8+rf//riFs//axE\nWDrSUkV8EaBKEqSjtXLjFmcpWMOqH1m+XaafXndcQgIH/V35uo2ijHT04LjP\nAoiwT+ZaLSatrRCnWuCpR0DqBb/3YFQoaOckbqzDkeXaWZwxPoIogl5o4tlt\nMqCpvSMLo5MeIKBXp1xggt1TvNdiNj4lhXeQ1Dv7aYH5gFDD+x6w9DIhA2qo\nCXoth/AZA5ShsB8o16wg4LYl5V3fW6u/svgAlclKu9qQGViM/2idM1yZxY9S\nmD5AHCgscE4v8TtfLO8X0VCbkbb0fy/Lqlb0YZJanz0oV/hrJhjp7pk0hMcU\nayuAkeqmqwzPVMWbW4Vof9tv/tEx6ZM0xsloPCMI5WCikVrYQvtK5Usbnwqy\nZ7M0efRjo5E5IW4inyfKA6Omd0evSRwwRWFqrnDICXuc7+JnSRXJ3EuWQbqD\nPYh6EshTl+cDIeZzkYvP4X17Eq/X8Eaun/dfCWMdYberoIxo3R0gvsD2Gb44\ngrGS\r\n=0H0U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGy7ZHUljfaUr5pcCEMLup4+j0cHEytOGhvFhfHYsNkGAiEAtJ0+impLkNbWuDEASzZjzzWnUUUlEK/Q7K5P890FdLw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.2772c509.0_1589222202906_0.8900251396165704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-sEB0kJBUH5vp/A2GNa8vfKZdJp4FJrl4n3lTcuZDSHNuG/VZoTPIW/rUN6/sZQWsAYSO0XxsxTwGSDbmWyPm6A==","shasum":"6202d7229fdc14c1272fff784c2faf932a4e5a4b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubABCRA9TVsSAnZWagAAxIAP/0ypB9a7XhtGBCblGEZ2\nmIz56cTjJr7eogNb5Ui1lJ6vjDOIRkZBOu8+SeSdMm1GV1UqzJnesgegl+g2\nUSQ3lOOWp4AljvEkt+TuK9kzPl/qwKaj2jwl3fZqOOkrJGrOrH47aauNfCAR\n5ZNDpSYBlPvgjS4p4cNooh5AA2h8/IbmgWwl8OfZjw/0HsgNxKv0J4alvkOs\nEZzW9LvQAd+W4Ubn5VpHrHnvYqPMVFPejoLbil+kjdGd3gp5TCURIUOE66MB\nkZiYWEJd3W5/ErL681MmhxrAViaZPpUJiI5jjT4WMuaNNCKpnre3neqfp97t\nnYm/7S2BplJQyWzmpEcpzVUTWN2mg73AxWX1MYXieNiVXw51mprLUOT1tPOZ\npII55yBnd5ambGqHwzCkyk8w3MuWMpOLOcGJtCUb7NPsZ0oPbT9/4sq+U/Tb\nSCW55abbDUQWHWLpT57A7SWUqm8p7KVZa+RW91naEMEIdSmN8g7LZCWleqWN\nyGkenQLMC/bynkHJ7rbhEOufaX0qtolgJYcLspKShMDApELfU1yz40F8GHrJ\nV1gwUEQ55EW3k0ofi8RGqNil0Euz3L/XhwV0lyYe+GnkSBxMeS0LigNjF+34\nNhr/0qXmDUykQb+CZNfdavZOobFlLM94/peZxHL5hbeEEuKWmlYqYZLEPy7D\nx98b\r\n=kyxN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGTYQxDNJf2fTfAS5VfJt3IUO/1YD5LnJP2Ou1P3HYEAiEA1x/MtX873Hn5aIZfcMmKr1hrKrvwd0Q/txQ9qtvdgw0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.fc4796d5.0_1589227521179_0.08825014949730026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z+Vfg5O2G3UbgctP202mm6+XiKHx2QEocbVdItIFViSgovJKz6giG+EUe88djh2C5XXBhcsDGPgXJqZwIW3Xjw==","shasum":"8074566d12e29288f300618cce00273209ee564e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucF5CRA9TVsSAnZWagAA3CoP/jmxpXTwJrLKbIxbGmEb\naqndiW1YTX4UHRTR4v9SR7G+M7oZGTwhr5jD5TF66e/9+dCdAzfyfhGFT6/j\n2z9tvrXJSAJLddp1wa5mgDv3VfGLhMyb13wHeAIYPif0QJeIAavumKra9QBu\nmVKDBfRX4Wg5uoIN4yu/0m3xllomnfTUflWgmRWMXIVltHESClyz5VM2GUe9\n8NfAXepzCNVbDNo/roQzKN/9RRzJxqnXtExP5OEFbpj4taHSVsKQVlLexKta\nbSY14eshlaggIAoRR+FM79MoibPbYK/odpEQ1orBToINFyvxPo9bq0J+L8Ah\nDlVkFS24CXW9Hc91PYKV7m4YMmE2nCbuxZcjO7zQnsQ7BvZ51zrP/JplXcfz\njS5qidn2UnYYmA/RBz9TmY+nOXJIVwKupUFJ1CZhefQ2UCZGLzI/5pWJoATx\nMKYrwv/n6Z21APs3bJP01+VRHOEykFO0xuafek1qGMiOaFg97EwEzbI2ZJ9+\nxm8MrrreEaSTeSwPmq9IwhiMn1z0mJWr0VQWLiAeKmf6nmgA/BIEmdT0I1O1\n8lj7S5ihkK6PUoOlGP5sqbCRq+qNIsfrnz4ppHlyg+EHfAHbTbsHN8G8Dgvr\nEFQCltXrNa4J5bm/wLYS2cLMm8L9a+Xie7+/s9uCslRTMHPWOif4/Nn+hF78\nfQnk\r\n=EZLl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICortR4jgB61U2ziG7b0hMt9gLGUy3TbKURHGAP2rIYHAiEA6WGcrk3YWUOZoMLr/g/rXZh+23AoYNhxXeAqfTMG8Jk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.0d1c5f2c.0_1589231992847_0.28652518470635613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2uZ59WN8gONgVVOI6FGp01kZ+FkRm1GYZHKe4nQMFlB3efR4LLrnEGsqvac6s18ky/QKplUXn00N+IuytylNJg==","shasum":"681261aca96e7eafdb23dfdbe8444e250b9286fb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetMCRA9TVsSAnZWagAAzPkP/jpx4lGv/L+vD2GCNL+J\n36PHeYhAt6rqRWN+YkURkCfdCqyPqPLY06Og390H3A2qWchvX/HuKKP53w1Y\n1lcfdAcXpZUP6akcEeKmvCIXUrKGVwsEnQ7Gzw1BE14PNr61OVQeVa7V15r8\nLTMXx3kvknqEDmeA0XjunnmCAtyI3k0vYPPalgrKHuchPbQNx+W9dnilPpTh\nRDxNm7QKLRH9gZWA5VsN0MJnqpdZuBeGYqzsA1N4HZ/S77MYuDktWbw0WyTF\nQo9QrMoiDQ1EDfarUQFkwhBpXjZBqFpYO2niPEk6LDhF2Rm+1qaUkVX7LdHI\nn4/GeRZrnLG8IG5HavCsVw17LwaTxDXePCVMeyZ19EBBsPBFC/lNB/6JzYmO\n0y7YzVfnoJ1QqUq9KEiHkjBglMm3Q+zgsj7Akecgpd6lpe72NaI++c09i6kn\n7c0S3EopihYBbZmnrqrHOvbzLIZobKJXOjVOXTVW7b2Yn68xO8fH5ddQY+sY\nsVVcLIaWSwwSBBejozoTNh8qVxOFxRKzQuiMlSCeXlqN8KVAnudGVVc+IjFE\n3MxHYIXjWyZGWwiUyFZRfGS6Q3KYmFKEN2ve5EWy2vr1fuGbsM7nGRw4flFf\nExPDoUVwyjYuL6gT6Yzk+Wmg3+vEmMlsu8slpeIING8d/AhsY9i5bWMviFoN\nEjTJ\r\n=maO0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEShCwcldpksSsGNQ/Y3cCZWH0yB4tNcCK64p3pFiiJ1AiBgh8uOXFNi6wIqWA95e83WRhvPjnTX7ZAIvQT/fBMINA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.d083d93a.0_1589242700424_0.5303524857851725"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dCrkAmHQy5tKnUV4CVjTV8QWpdAGOCmY2V2A/u25uBOELDaOpAVO2Z5ldoTbBye0X+0y3DMdA8APoM5zS+RCCw==","shasum":"d930bdf412e97614a36d36523277a04947b6c127","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxb+CRA9TVsSAnZWagAAUasQAJnJyej3E1sBiOlWsD7W\nLeUCYNv5pWcAI0dvjMrYkrplOPUaZoFIgvbOGmQRhILrBXFheKrVsJPwhe+M\nomXt/2Wjy+75U2ST6w4kkpiHyYZbLLGFH1qAMTt4d61QCAswhk2SfgnTxPsW\nRotT3JY2Wq7KZQFWeslaSy1VbP37l7Di1Hsc1rHSvJp35J/RVl36fraGVPPN\ngGb+iVc+Pr4JydtG4eXjo6pwi/JYeNS5s0QPq/xCREbPZk+x1Saj5OgAJ9SL\nIhkMNN9iCW9IYOSY6uvu/uXA9+WUu34l6Zuy/tNyan5qCkncG0CIDt7SYujL\n5nui35IYuwfOAs+GAJc/iaxKYxyfRWASqFaaPmxlcLYTtmKUwIXltVE6A8Fk\ng7/3WaDnoaH2aaPJ/235mBQG4xLoafUeZAmka5qX8Xa2p54A5eRQsARa3aHl\nsisnE91a8FytnLGuXN6N4W7EHY1O4nurpS7yVpV8ysk635f8iEz/PsiFqYBg\nRz9DtQB2fBKkUUlyB9imKNDhTVCTwM/3mADv0iYjkIm0LsWGpKFnNamf3M3G\naVQ4mnG8GBjAkXSm4Fk98kFojYmz4TD6tEogxo0Iu7g85CvWacPY9VzcLLRG\nHC1oQQ1lgVwkzAnOFSIgf8X94oVREhCtfRMZ5TsbPgQk3ODd03btBumwahdQ\nUKGC\r\n=cOrx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID8SsK5Id7eNSKso6URz8skQUUPwwuZkRN3yiGmqdepWAiAg9n3otzlpjUU8MwkLu0nW0Rt09mAJUp8inr1/xjYAWA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.c95d429c.0_1589319421704_0.05086740634467812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-S3cS5sr9v4jjg715svHSR06gBf8mdpSPpmxVoYZtmh4woPj5+tY45iElmmxSApld3wc4TECUDG+QEcy6ejk9hQ==","shasum":"86b3e9ac9949b74b799074588e3959e9ab3e5168","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CNCRA9TVsSAnZWagAADqgP/R9Vi1dRyTF06UJ4rZgK\nktm1SJb1q6RT+G0zLwbZFTWOQfC1s+GRMZjUbrIJSmY8w2El1sACxbFkwyjo\na+nsgK1VFif7cOPDTc5+bsaVI+dgYsVcARO3RuAOjFKbpkzXPOXGQCbKGPYx\nK0C1gNAqtGs9HSuQC4LySAnIz9fxL4fiLbFO8aXCX5/CWJSrYMaAI6I4Xa6W\nxVcZjimiiLSpvA8+Fcl7mnLXya3VvHdiCAVP14NOnHhP5kKxShKJ7lezgrvP\nUfan65qjNdh9bgns2j4N6JdEhrCoKzWHc6BGm5J/uFc8s/+sRULyJJE6K1gN\nnU1VZbH5vhghGgwKbWwHQJDAHRevDDjGj24wHw8J5+WQzqK1cvytJinFOSB5\n0V33411qyYO+DcbIrwNqCv/exjW4k+2KwarZO+V55Tyd3wHSNbT6w5+EK4ut\nddVykb2z4Yi3QXGI7TTxpAvehVCgSWt8s2iMv0CeFVVINBl2nDS9eDqfioo1\n5GW2nHAcaBJyKiqw1Xik2KlVWQHLjNfTRy79MgSV1aLBlJ0+V41kKRBCDCrP\nWzi5ks6JgXSf6Ka7xLTFbj6lt1wUKyZUIgaqGwPuxkVzeWQER0YcLl2G4HmK\n2VNykoNEJDSC4RG8j1uqVxcQjYsgd5Njlzrukuz30dcnfP6UUAdtSdeUz6GL\nWXFl\r\n=qbWT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuW7PwNqCPAGOExUUYcSkbEMTZCgmnpEcHA8QMszhXVAIhALdsAJRa8LrIOuCw3J5DZa4vBpBRiLw2RZj89EyGVBnP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.0c1ad726.0_1589330060760_0.5153605910174808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EkWIEHpWKKsUy1qK8N2YlangI8CagrA6jtI+Ar1yY/Br97UFN1BqaiN9VHAJT582fmBKeKOZLfi8h1ygJJg8Zg==","shasum":"b358bc14bc95b3b48d2278ebc8d8172f8c2ae844","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwjCRA9TVsSAnZWagAADwAP/1UOe4ykkIUunROGS0c2\n7/6cys9tmlGV95Xzwt7ptMi8IFFy/aV7KFlIaYZZd3nygMyeEc5T4RlcJBuZ\nH/yMW4Q3nQ57WY0dFB36iEhDOMuczoisAAVkPZvmTssVWryqMyYhfoj1qoUS\nT2nZtBLgZhhWIke9Us6BFuDxGKv0Ohl1rZgrc4lPCj/ErZhvox/bOCNKz10k\np4//18ztE1UwIKIEBrLgyt0jw7VdcCb2h3AQ7LruzfW8rLaL9WnFCihmLCkm\nnj8SgeXEtL9arpaPpxwDXBualucr8u8S5bQgdLgOde8wNXzldP6uJeuubcXh\nmImaux6/tbWHmk/K5Omb73StkIFHf8RhAaqQMGXjB5N4tDbRRH/bJkPrCyXO\nR/R5P8nDySmIVheHMhrQ10ova9JU5ik7K4i2PnNrVmw+JIjMpxt7sEgUaBXv\nFPSzVjN4EuKkd+WW2pnmAQcNV1RD1RLwLNj8awGMv1gtIZ+WnpCPovFBbrD+\n9YL1KD5PgJoemf5/oSouP31+y5Tgr4cbr+Ht4YjC/UttiM4pgwfLnzQtGtwx\ngfrtt/s6Uc9oLg3TvUzAH6uzjnm4InKpcAxtuRmIQA1VLfwLweCbkRJort/5\naXQI81P7Oq3Al4q7Kcidj3wTSqcL/G8XRl98IhU0uw75LzP1drBI94XPns7S\n71a+\r\n=sNGH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDS2xpAo8b9H1EhKUzWaXGF2N3jVGrJ9xuvJoV1TDILzQIgITH2R7g6638URkqsgGUt6KvsnmKz/9QtDTo0TShoFH8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.8b6a4700.0_1589390370652_0.3307568879287528"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QiUCklWLc3czeLu89A0yJ1Z0VYgja2PKXHuGE/uP/uLlUuUTdXyx8A1SRIQZYXjjkExmmm6uoE7MzUEhdfV+NQ==","shasum":"ad1692769b2b351e6bee3f78f95fa7178ba41d51","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWbCRA9TVsSAnZWagAAnfwQAJzWMj8IOO3nj4uSH/yv\n66VQi6XCt0PY7IqYSd3Vx0239jqly/QRWl8e0rE4Tbodqv7DZvkl+c+VVETC\ndh/kPiO1TBkfMjRd2YNvIYf9nqjvMPMpgFHPG9RPVbTtXvBNUGegxZhfproH\neBp9J8ZiRrkna6gJ/KDGaml/K7XeN+M6k519y8pT1UCIdq0+rxU6ft/O/o6B\nniBmSIjB+T1PcuNP/WeHigvlJBxGuiJJhzHSu2BoUzcTIdiuWj+kmyICf7sx\nBmfSVW6FLUFHIh0Y52+vEAeK9k5lmT5itGv0PdxT8Z3QxIurEFm79Pp52A7S\nroxxq/4QJXKILcFANVDLZF9Mwd960Llv4CNtklezXNZxRMuRnadRgZIBFSTW\nk6aiHBM5WBRWX6rWrKsTCt+mNc6JcIFkhfqb/LpQgpUQQyZEOAcI+B1sq0TX\nAjFTro96gy5fUbWm3VN2CrqgMDMnNEOpbp2WQREjG0tK0O6Avzf3P1A1fCwM\nHQ8nqK064XDhFvhEYtFLad8HdhH6j3l2CiNy9Jh6i9eHiH+EIinBnyPTZczV\nCtBlSDvK1hLbWs6OQYQYKXl+yzIeAatK0+xg/temfjGV59uGr+au6C5NGAqK\n5buNS7p202ZamN6kY9oE9e7g4qwzhiY2phQioEznD0sYNH3iVkWPAVxqdtOO\nHreD\r\n=0zBa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLkKt4oohEXVOGqoNPIIHWe+xT9E17+UVfqbwbyfYLawIgJ8+fEHGMLM3CRVBAAq/tN7jY+fFTPNx5ZyYuN3SqSjY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.3270effb.0_1589405082948_0.9687969738899236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-fYDwE8avIiG5MMMrHwx2IZtoMrAyR7QPoXGC87wgMHvzrnQi3rYwY6C3aa90nxOoq24RUspkN10Co/olqq+Amg==","shasum":"c0bf81b839da99f5e895799ab6f82d7d7810b239","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZACRA9TVsSAnZWagAAmtkP+wfNLbgSOOgyRPZDtCOa\nYj0IVJ20nO2Z1+2kC3jICTOl2YtGgjJbICzm+S66+sJkpKaXeLzfRTBffLZP\nN1TWnBEhhrfwrNQ02scADPrdmqe7TLN/6+/fFPqzYyL8uxOe4ldosrC+cu5d\n/FRjWNrmRI9H+/3jhmKYlYT51q8oTUnQp4aq4GYkd7vtvKchNiqGYnpuwOem\nveKoP4HjtQmzLR+ADo5MCePb3YW0ZH/A0r/Jjc5WiYjdzBdrrAuc27tcZ05O\nNlTlhERbwA3kNWQIklMO7cqC/bdMUzoLKbFzh9F61/qqJUBa1IExSo/0cqcU\nLGJ+UUz5tjHzRXUP4AHWpA7bdSJPejCGrx+IXiVKLG0E3BVRSsAI3DuN26Yx\nuyQdgXVdxN3KOnqc/EQz3AGHPy5lMvhHwDBuDv178O/HafWochGWPFxO1nxZ\ndWhqPvPKDrj38VY+/4oFKMogIXNlTOXcWi/56ec877QjL9ssIoKOuWrXrouC\n+NFBRxCagkTeMxubCWU4XvBv3kIlMjPp6uIbpvPPyoWSNc4UnsFQEyZIhi2c\nVNeIkRkAy4O6I8CF/+DPKsESIV4XeqHR44cw/U/2FGVHLXtzw+YEz4FWKAVA\n6ge1VI4xCXYfC060ArLp2U14LU08/0THd0wGA9bNr8/Sn7B/GTVBCEarlT+5\nFdRD\r\n=f0BT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGblVMXcCs4likxdHF83alJzqOmRNgJ+JnXqEniLF/FgIgZK7o0cuKdwmpazi7QsRJ2zn4ers9sMxgERBOy+aCwhM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.832e64f7.0_1589417536195_0.4805167122383436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lHsdI32jhi1sYLemjjTphU0M6r92QUVavs8J2gVDXa5KU3g+pBS3dethaooiV/WZlR3KwYWFTEUeUHuBec6tFw==","shasum":"64eeb29150113ce355595b9bdffad5847f53cb62","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLy5CRA9TVsSAnZWagAAWqwQAJWacyXasJgSPBke0tra\nZa/6TqoxJiOB3+yXFv9FlhTwzYM2BBtln5CQpqPU1yLlzQnl24Ge27Fj0gmp\n7280sTZ3cigzeNEdIyIGgt2qyc6JHfKXWFBmwQfSh7wBL5Wg1la/rF4/P5jn\nB/6hXhIfaWZMer7j+M49KcQbE1j18GtCmoJgPeM6em0tIAVB20RURHb8a5Uu\nZ8fImghjRtTp/sAdOv+w3ZlByPqudZpeVFk77rOBxPb0/Krvi4urF94OYWAd\n8hTzpu3H8xcCMNMATV0T0HpEDFYXn9u4vk2/mlqISHpQG7HqoToxCy9pds9W\neInWxf0LLXwqVWjWIgnfQz4g037Bk654mqUC9u9fJ5ttTqzyBGXp2Fs34jFC\nSiCBaF4hH4xYC4bttHQXgzaKX+ipVCrpgptJTdtBiD5gwlE4UjDCJJtg75QI\n996ZBoNKVona9rNAbyKC1EGUeG8cHdTbBxNaaxZHgb2+OeKM4yjofndihari\npkRpx7eHxnEh+keLoiBZMlGalofNhEwrajvcXBO/ZsDeZueK6NNo3bg4qixL\nQEiV2/j9cgjkT3exqAQMRxUijIh4n8pflMydCawdAEQLNvMKAdNhcq2fPQF0\nlpKE7MAfdTXAbjdi/7XqLM7GNMtbuR+2Yxu+RSFCOKuQGWR6SdirLQmop30B\nCAXu\r\n=1f0Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN7W7eCmWkVFUkWXOpRu83kbrIAvbH8IqIihOdkHpU2AIhAJcfcLmwpDnZsZ0SxthoLiIf5bSUn3VeVeWZVtaUlS7o"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.472fc4fc.0_1589427385191_0.38447584930267587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-v2/aHo7TU5YhDTSPBgCN31fA1uhPQHd7embQtfyxRiOkxdLIDm3oe+8e/M1sBKJjiZNc+cqL8AbxLBA4ebQzkw==","shasum":"14afff028e27af5abd5870441564d8a7388be933","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDdCRA9TVsSAnZWagAAHGYP/3WYogtIYIvx1MmcWoIT\nY1H6xSiNBaWF85Aq7LgMCbVB/8qiQ36M7xfP8AoMYrcVbQzAWUbfpTmcOJuM\nzqy6fvsjqjnkL0z3SipYza5aJTzBc5KhvPGdhm9KejODuUOiH7Apyi4lB1ZQ\nw3psmqk7SdQzui+PhHiIArODIOzTi19oUVhUdb7/4FbG/ycflw/ZrZHohxiA\n/eEPq2pKB2zclq8Aykt9Qou8UVXuNCT8nyIctp1PvYxh+qnkFrX26e3sN40/\n85AninFV2ajaQ8vESxs9X4EsGB5Kg0/GI/L9Frp98aU9XykEF9L708BIDyHT\njEVkvkwNu15nbr5Ecp+Eb8a6igPwCbgDgsaq7M6RN3svRdlByb0Ul69IwVPQ\nMOzaeg0cyGlTSZPts4A6UcTxBa435rp09gUpZ6Cmss2unGXZ9npVMyIKTuJG\nDT7w+cEDM9t2Xxhsm9L5HByrHX8bDVT+rK2/tGZLED3FotBR9I8sj6jVvT3k\ncyn2IyJXUmeaH4ElfljeuWYwDGJdMp+jds4YBMUoEfj3mDY5em64tL2gFxoS\nbEf41997gm02JPPGqVgAa+Hefgs2Kp7lzKMrJ8m8VDNXqvFWga3oLLf0yAB9\n7GKESnG4KOEg8lHPJRquLPpivVXtkeQU0tbifaNTn8NXxjmnajrkpEfjfsbB\nPE69\r\n=RHuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEj60PCAZ4kj59ryG05wMLHdrddH7luBx5oZ6wrifcvKAiEAv4hrcE/ww7N6iMVeqcaDtNK/CXqcgndkXvaCU/Q6VmQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.4dcd7dd5.0_1589473500546_0.9945759564634116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1T3fc5FK6RoHV3c36MaK90hhYvQCrCRaXGX0Nbxy0/cnWX7J7jZzNorZ+YXdIOQihjAx+xjh9YpJ1LmZr2SnuA==","shasum":"a1eda77a085d20479a16d8494ce1a408500ff18e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyTCRA9TVsSAnZWagAAMMYP/jPk7SreWvP5Dc70/kJz\njmk7MLD8t8jUkbPU8uAq/lV/nwKEt+/LzLwI3JRoSHLWTG5+iyM0zanSZn1z\neo22fceqlgn3Bhps/nLdIcINSycadsIL977b7MJNVPLULrTIwMRS8S6Bf6XJ\n0zaHyjnf+99mmKwbXEiZVvYq/NlExYkkSb8tGUZea8456F9nK6p/PmRFn4kk\nVAXrPxT+w1wQrIHS6LvX5sUJ7wRQDsotRdJetiRAqnvL5GFodPev/F4ENIiV\njUdYRRT71R1wDpwd23MR3eRkftKS8h6hXWXTnB0klciVQroezo2BAQWxMMdk\nigwT7bYV8NjU4ICuV0MFHMjqG+IpYDB+M0tNey2zRc0uxzNp6jB32FH9Y557\nVP+UFTnex/qt9RY602pq8tObuRxnhuLQH4nhAZs7r4Bug+tsdRsxgcainMEH\nemk9U6gsXYXada2goOGGfKnZTSA9a3KlTfhFzhQF8wPxzOJRv33O3Y8eE647\nZY0UHdzt2UKMkmoNi7icLpHctubTQabhyWmgx3EzsGFbZ41dx9skxa7MazEY\n0EcdfTvGOrATTUdOVXMrJzsXBG/9eMiTxSaXPB4qEF/rhgB5EM4d/M1w0hrA\nFLpM14vyOHliVupGGEL4L6ePZ61fDuXQcn0U1SfsRr+HFF4hsCyJPjGvypvv\n78Ln\r\n=oeaE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICgcDzBDZYQIlnlT3qzki5XSHh4xe45x776/hU+cXldCAiBiJh24NGd25IPgz6Jz7J0n9AM+AMM7uX42i99vQp0Uog=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.bcd3400d.0_1589582994930_0.6823749981107956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hN+Cpyavv0HAd7daqa97ZsCU/j6CGfRAfv5R/wB1SSgMgrwaC3gg84Xenl+kfqITNldIm5dwOQ+SNpEzjjB+RQ==","shasum":"8b59c27062fa76d874181430903f1b512514865c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUcCRA9TVsSAnZWagAA8hsP/izz0BR4TSOhTfVdCWqO\nGIpmoDhjnUCasIftI++/3AXMFaBPBZuPC475+02OrXrXgkUtSg+vvuaml+T8\nxUVbZMISfJiZUNMiu6PgIqhykqTDqXhryGMnlQSt4EflMQLOSQkU1/Xm5M6n\n39e9mnpAxThS4BPYjxNm04+xlWz8vgB4wB1cUTxH4XQq2eypu3jB9UhVaKNP\nZT8Ma7JbZzoRY4/NaUOsNKjP+Mu3TyDKdlSBjdv3Cc2H2s0y8d12biK8Q/HP\nBppQ+4y2JJyxko/LapyPBlRHPgV9+4JZA4pFytqaqZHVjNpiUrZXCSeA7RkQ\nAS2QSMl728P+cpgWtBoOP+GZsHLqFvCFBeylTWjRMmyTziwBiXT2xGQGynfe\no/UgKWZ6a56FAbYdn/afMx+966C/Q25xJPtqwWIluM2B0mOjzTRYZH3vSaWl\nJvqlN9iCRh1bs7SlW2w3CqGaYpTnAtbh0R5T57K4P/8+Xk2plwq2n8UzkCcy\nlxCjWGu3biRoIO+n/NTX4Bb+/ROMq47RHljIta9+ORRRQ9jOuAPwcR8CpimO\nljNLHb/368ZjIhWtlH8hKlC7z390VsLdVwyHwSAhcivG2yutgYHXdaud0IcH\nqRWczZwVHu8uBiSmp/4f3Q7wj74ftdjqN/mHHBloosGsYmQebQr+1soPgRa7\n7hpX\r\n=kduW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArvGoI5iLv7A6mtdRotxEBc8y3+P6Tdcm3GRMmo8nQOAiBmJpyfqDDlyZHtx3KJHooXxNsSe2yciWzWwJL9s8kOpA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.91f63179.0_1589589276310_0.15066104526383173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ixkxbAIjE8oTVIaaCRHv/jDb2hqgaN/cJZh+XOwnk+6lpRLuELqGT+0gMJhYbHXPBA5iIqLfFeFkC+EyVxkHyw==","shasum":"f1c57982f9d1d072cf953d0ea400c5c49e282eff","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSRCRA9TVsSAnZWagAAZRwP/jTr4Ni/4wzndH4RqTME\nyC+Rng9Gb2WF2CqkqqCah04qMrWq7zPBbhLPK1W0q4SE++FrqMG65OdDL7kf\nbExR+lq5OivSqLYmUQs8UPT6H5QDazAlFdaYUTo6Qa+Qv0Rle4o3tNJsPvi8\n6J2EsNmHJTsXSPYG4tYlLUbSE1Ly47FZs4mnauqUrkuap+sEVBdo94s8++YZ\nrXDE12R2Ej4JWm8a72dU10xDC0HWZt4CZjzvpZ2PZD9PhQNeI4NUZUyTqfp1\nUrwydqAiLrnYlbwrYHmn5FEjXkHRcrm76GYm4qIzj5Rh1pf+wFWKY9/ndkbI\nFyHBmn+KP7kOEf3KIS9gKpnKtmRAIu040KxnoabQlcSW26e9QB7dFAtSG8RH\nhhFHVbTfhppvOadqPO2PuLYVeWL40SSjso9DLI7+6zb2wuX4t48xMrmXmryW\nR4pOBe7KFD5BEpnUe1btBPK6Tw2AYif0pCaTCCtIy705Owx9Rw89P9BJ0TZI\nuMh1CO7xEVIK/t5Sc/4PO2/6yINI25ZrJjOrcuIw/7Mk8YyASl5UWrqFJEU/\ntvwavuCPTbuJrcaTvi7Cl47yKKBhuPbpAjVB3iaWcjz1gvpG2iLJeV1NQzRQ\ng1fuDru97+xpqJY0q8p9KmuIZdm2GdeUn7FZfzt1CW6eX8KeKpghfIz8HElE\nY93W\r\n=VOzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZXfs0SPdAfb8/G8N6MPj4aBOFOb155DZpJJ1bCLUZBAiApyK+03KioglAnKgNGpwEHYQmUz+JEhrNRUaSRyEOvbw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.b8aafb56.0_1589826704400_0.025899780243668458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1asESdWyEWwi64mBTojVVLuwnru8+3qjrFsbU3fPGxnouSCX06WHieRmYJ3jwlcGIEECUkPnZYujBpPdrOpS2w==","shasum":"acc914e4a27a9d66c3978f83dfed7e537022a5cc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRHCRA9TVsSAnZWagAASHEP/1Czq91h497st1jkIvjk\nEYtoScy5M8GBfScx9uCfOH9M7na3fUA5p/p/V2xFr3O1UirQmibi6pn2CE5q\nHctZI+NfxBV1T1yWqnDNwa5SKC3X29igYMzt8N5TQU093J+AjnIYVEh3F7HG\nkZ2vzx/w5NMgrEnJ2dzWYBPkksvCQUtI0Oa1FQYQqmrnuIGFfVd2JVylmYNo\nG3qowJ4g4o+19czaIU9Oovr1qoeoHlPCx3wuaUReNEL8b+k8D3spMp/XkSJf\nlOMI4eOaqEPOQH4cQVhUPbCuOrr4jOj3d4Oqt7qg6VEs6FjcO/pJLnWcttPP\n5WwmWzUi3RzquyFKCLeS3hf5VdyNIHE27i9rmUTRJgrC6LYIz0c27X7yrrTG\nRvdMotNiitBAncjbsAWGaCoSowe0uxwcmHcdi2D/+5QC+55UX5P+cyGnZbPZ\nEBkdHL2KjOvz4zSCJnbYyG7SDp3WfFlmXYcBrEK9nzMSjkyiNNsTb5XL/dOj\niS8BZhgkmTfAmxqEOn7uwUzJ1sNVM9BFOo4nRdsy9g45jwN7EA9EO18eFzNX\nx8HvYsqxzPwLWcpWL0GPSl2bZs0l3WjS9IoooQXZpMqZaeiPEU+Vt88tlFO7\niLsxXP2AGDpr7tzPC1h5Dt60R9VUMtuQgMK4NMseZk1h0AzY3N4lRM9RJCN5\nGirC\r\n=hvul\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEiEHUF2ZXFFtO/t99P5+PFeecN7IasZ/gjZWRmrGWgxAiEAwpyIqoH2lgxewhQeWlWq4yyehKSL+U8NKW0EJ3cUaPU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.a564b194.0_1589843015281_0.12889790503680087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lTm/nPitug7yrrupfzUjq2kX5XW2Mdzcg2V4Q3Mn24xSocubQT6pKl6rrVK8mVAYI4KF/WpfJrUOOiw1bFJByA==","shasum":"8bd10949e06e75972789042ae8973a0b103bcbb3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bpCRA9TVsSAnZWagAA4pYP/0aFzC98Fe11NhnglsPL\nGhzOCoqMOoSTamTzJIYwO+K4HqV61gLPeIq/OgzYwt6Rg9l2gCkKo1YzlXnb\ngMdAu3i2ZU04uaMSz/jfLpRCDxb2BXrHjhJdi13f7Sw5sNn16MoWnOkAi+tb\nS7VpiJXJztz2ui707P+YwDbH25w8b/izrx1TqPI7cdpw8EnXbY6ME/1n3Mi1\njVAys2FL+2P/KiFiT1I8f77Rmbu1pAgWeytiIMHt0us3Wc2fPHTa31ZLGKjG\nRkM2XP0/wsdPxnjo8PJAryH8boBCcncKoCLgljRXSzTSeTZlezFv6xAGThbN\n1v0iOAidsH+F4GnSTR1ejvu7xE3yTdRPLnqu84XMzU+2lFkfezI/IHt2GLKV\ngEqbkyFSAhj1dxTD0foEefGALGi93tCh/gZubWpxFeP1Gvz+5Jk3Ev+1Nm2/\neZTH2fGE+mTqapI5BUTSeNgw/AulK07ERpjVmiUHLtV/H/Zo+hLCVZoT/aI/\nPeB1bSmIOXBc5hMPZOHXWbBLS87Qk7pLjklncHHitpu/BwsBj16Hu7MooWf/\n4ppEAAxtMCXowHwcb335ZXwCtAR665OjLQ2JTI4+FJqC/nsFF/J2GDVDYQED\nsEJSNrmdPCXsaGeg1iUuWGB0KYL6/B9X+7KJR8m3mUBwD1n0stWYdvePpMMv\nJAbQ\r\n=nfWi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDwQD4SLfjeAwzqOKYEjw3uSOFjfEitoJQVLlMWxgyPTAiEA78HGPsqjG3NvpQU/f7JmWrkM1slpU9EZlXYjbsV+oMg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.ef56465b.0_1589860072949_0.5147798442474973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oCSOD0nB5IQAvSICGbEieG4LMnqo4mGUOLUdVbL8VTOC7wKMY0vDXsoVrvsgzuTPxDrvqFt9flxL6GFCMrKDyQ==","shasum":"cdbc7de3a768f592934f0f1d89168f06ccf56aec","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZFCRA9TVsSAnZWagAArMUP/3bj/Sx360ETV9ZOsNtM\nYcZ5DlQ5YCAU9sPY7nZGVNpfM4BQQ1eOvVwv/H+bMhfdzIzOpMh5ucPREsnL\nMv/RpspywCL+RyZr0x2vV9jbOobp7zXhgAVQdiyQa+5eAvib9/ID8pSth25W\ngASGPlDR7Hcg8SYeCjB3dBbBrOGu6tsjBS9WBpBOO5Xh8DOjEds3k1t33wvg\n2aFtfwSnYRLwHJtRDGN7XDwhoiH2pAzpuEAo4CY7Vlqg72tmREFtsn2aNvwo\ngVlFbF5sJ1LLAfZg/jq08qQcPLrjBzhmMKEUhM5gVvAYBvIDmuXSnGeD3Bt5\nVU5dV0055CgTkMJHF1ea2ojOrAoWQmVAAaw83j9qKOFCEZ+d60MvwVbJkGLZ\nGPbdsnOmE1Yu8ZBrurTx3HKUYfKN5NKYF5BcuMcCzBDkH6GbmTN6cevNAirY\nJQ04jvWaX3VXmHvYtciqcsoqk7YZvaWX4UG8gIAeX3O8R2rVAtL/Jh6ZOS80\nXjaf4Qrt5e0GEk+6pMhLvTA+Wwp61GYr8eUHDSzyaZU1BqiMjB/n17AWPouf\nKKUAe+xowAZI8wxtu9X0VKpfa9qvTavS6mjY+/1jlB5h3RWJgEnBcbjq6Itw\nDsrMFdx6Om60ZOSueqBpjvA00SNrKxGi4qteDfhPWFL0UX3pFo6+5AP+yvMa\nOEsh\r\n=+Pm8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBrPld4E23NlFozmYc4gaIqT8QMXsdFK+4WFW+RYShmgAiEAyCatQDwvULlAAi5iGIjsTUnbdPnXWhqcmPAU8DseAcY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.c22dcd71.0_1589909060691_0.49219460659441916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RFbF4NgFHCJbvWSqxTfzltm7xK6fDykjqzjFGfo2rifCUY+7VW8Pho1g3/hJkndehk+aOWAbpaUfjqZLkLvQxw==","shasum":"72d0725aade27df8f0855db0b0093ef32d891009","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPECRA9TVsSAnZWagAAVXgP/1LtW/s3jUJ60tEJtZkF\nTxoGoPEsZOePDphpCu68CtwOV5W+cqWwKdoizKPf3xrJKJnJeu48pFjfCnvW\n6JICe74CeKVD9XNZ9U0n1kbC+Tvs0/uUi8lu4JZaxbUiRS95bBJvKimfZ2kd\nUMqdpCcwi+ZmbMmbt168G9anY7V/703kw5SzBH6agvlsVfU8Hq8TM0SPB31k\nDj2xKTjDR3qy44gFRIlQdzbctbka6EaXC7/WAX4cNrPLLvFGqkgTzN8X1mG1\nFDIn9UNtGiI+RWj0mxP2ZQheBQ+x/Ik0r3GzxNOXQsuPe/sM/64zo2+lX5CH\nyN6sSWuvrRLqf3hw0HJGutJO15W9TPCF3o/hO6VWy75toOgbwEBBqfuC+liT\nzTuLXdOX7KE16VBgXZikz+nr2AEjzvHua90T3jy2Nu3DK3kFYpUkDYUuwTo6\nlRWY6FK8ZmboLGKyFh9pSRX8ApRa9GIYwp46Rl7xUn+1HhtKGPr06LVOsVV5\nKCDmZFlPJ+GfNw6Q8gUiEkXfapAApOPkw2neD90xYIJixuYauwiUAxSHUWbH\nIN1Byy/oY8ffPWMmOCeH6By+zc9N6wrY9pTz8pY3Sx3/gEjgknBWbc2ofHSu\nNOHFVDnptCyw7k5zNsn8KENvqIFzpUl5e0WdHWQmUiLzfQHwT0OBnGYH9QdB\n6rm7\r\n=9dp5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCz85keYdu2UFiOJOIt84HxXVg6LcOt7xkoJQfUoRGZNwIhAKFgWf/E0HPcLhUN9p2LWvNQI1lzqy0qrfb6ZU7rKlgA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.6eb62388.0_1589920708378_0.032390568031535505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MpD7975FTAPHIfry0Sm4h5jkqbPtLb4InNIQCS1B6RWXFOcqfxK6t9mfvbxZboUcRkRGP4/KLUopdbfaNn7OdQ==","shasum":"35fc1c7613dc4eee3b007d3e4d712edd79143dd7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFHkCRA9TVsSAnZWagAALSIP/jzvKTaevnoHwI8xwouG\n9NCl+eH6dUDWCzSjt1g5d+LZIlHCrMA2LZxNwOqDV3ZjYjI0AvlvFiMtE9BI\n1ffo7Gq7gxaswYoGGVQuKV9U6Wv35jnivFbaQGzgJ9nh8R4fUAAB7nQ9ytAm\nqBh+6ZPrQRe9GU0loi7AUAeE1TqX3AtbBKeY2OGZXrIKC33IW7VTdc+uMyVu\nhBVQ4mMx05JoRM9+xhFVU98numrW+Hmuwdcm93XwUti6kwDCLmBMfezg1HHm\nYuK8l4yrX49pA/Bx4U6N4Vfn9GXbUoU+ZzEHamaNbO+Q6fz44vPM3q5plBVl\nNkWv6u7LKTJydNCZTbxrIdetwfvWiYAIj8rPCiHXH3DbgAzIG0DGs6L+Vu+D\n1tRpioI8Hkyf7hwTrYEJEiySVbWJ7QFuM5nJ3+qoDIP58eFmRoRljQ1w3LVn\nw+2f8Dvdf2VU6qUAQV51hKcrLsYIEugX69z4JKGyCDF/QrcMNsYgx8SbvJAh\nqxfOGwdtfL1nLrea/zulyp9BmxV0aR5lCMtvZVY1UK99ymXs0wchKp5tX+wn\nx8CdxqXkM0aVgHx7dKa/U2dtBnQQiYPaUTqur783DS277SLHlw/1Gw8OoDKC\nc7Fcheno8hOF5r667WrZA1GDUxLeRFvVgHPnWtI+qo/dX3kg+Bge87Br6G46\nlH7T\r\n=lubT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwsbSxxjqj3uft3om11Ov0xY1qeWXVm+84oIXSeI5TVAiBrzW9RpQd+zw3tprXjo//ctt8h+xfWesyZNCjYWkDQWQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.9bc3230c.0_1589924323836_0.10619416190904762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-40yuLCEHkXAWn0fm/Go39FJAgPiizHVgJioAfKLaZTX9mjICPJ/H21JVknpH72fxIfFY6o9VJzpBaS6KsloF7Q==","shasum":"691c01b27a4c511e124163147b195219f8e43ff7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8ECRA9TVsSAnZWagAAk/0P/R0HafoizYfzSqhFbk/E\nvqUd9yg0Of+iw4fWqF4U/asrSREytubLWY8gcGch9XI/A71FSMfL+XTKVLcm\n06ZDyYcTGBnPOVN3HN7utHw8nD7CJT3bEARPFn8+tO2PLpO1Q6eX1O7LLcTy\nRU106xOMckw+IQltbkRyGugJvjbXNnN8ja9wkCBdyhWqwOoA7fuMzDoM+fZU\nmcASRLTVkDIfUHTvkhqOE1WfqwMz4Qr4BjZfTYv2nEyQQPZvxI6oexrPDROI\n14IN2NXpnJRw1aYYj+IzYQigyKyu6FpXTdhA52TiA9tHcMkrNxugal3VAdI+\nfmEgyx1yrYIUvjzt0yel8JTMVBF8THD72PzKYdlKtvkdLffZ7MV+4/vCmVwo\nPQ3x++0YpzJOeqjPIYWKRzRBOLoknLQFTHx1Hs8M9LJyRwuaiIU2xYcgWatf\nuAOCsvM/Zf7IAEfBgyO/HKbV05sKFFd+eludtbYx6hqPQ0AuP4Vz40fG+/BB\nEYOXR2Wim1+DQCFVM9TvyPA18VEszUVPTggVa3ZE90PBYTW+GKpGgk0M63Rq\noU3kRxVg1Xj2NN3QYf8owL4rvPZeSLdJQdyNtB9ORu/0oD/Ih/cdIqL2R1Jb\neEMgiRdwahGt6K6GPmt8VB/3M3SZwZHk0v/iV9kYtxLmKhXqT49gWZVuR7FY\nGOyE\r\n=mgmP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWbJHL+d46jEt/ZVZTV0nh24Uh55lhQ+Us2bMMs0eEKAIhAONOwHWAFdFhsveGD9Fd64ImP62v6rfIzYOUD015kWz/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.421a6856.0_1589952259774_0.9165064834879446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RHMdIz7lj9zafQA7bzOoY5bvZB9/CPD49K3EOoN9q1fjMTcwKd9w8eqnOyKotfI8Ih+eKCZ/swWz7/I8PvS7Uw==","shasum":"dedb0773359e14925e4b676518c5764feafa9e65","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGOCRA9TVsSAnZWagAAHeQP/RmmO54uBCZ0jjrbS9GQ\n94BOsHhVA2RJZ8Ngcex10vwpqz6SaTV4COfmoR318nstM3No8uucRM7PKJxr\n1iLSDnJctvk9SfaSmup55g+BI0VKi9NHe4YJdO0+Q5NXEV4NLYYJtEwuHnrB\niOX/ALYjgceGoRm140FSuNIDIqb+m0KdwEP4j6AMIUPlREqr0MXFIIGsSz29\n7e9wGAmyL2MrmCQYYlyOvCbi/3feqOnvGS1lKBhbPEucHOk4I4kXuVcZsOl0\nbOVgUpXt1y+YxRuAglgVoM2+ZiqTmsKOkdJZ5YWSkaLIo397859VwR7WYbXl\nqxV3zAGGH15Y91XlKeB+8jx+O0MOxRZAOfJ1BgyuwR5+bEWimAkq4Q12gztL\nhbyqohsZZeMzniESSLBsXH5/g6IB3DlHw3alljbil/e4oefn4RrFeEdx59l2\nTPWlciIa0ju5/5slWSBqSRhhYGSNvc7OF6F1pG+J33t2fKdogoHOEHK1qjgm\n163xpwUUg4iLX2Kg44bqW2OEHQGwmbn8q/DvIu+jt8HztSkJbHHWi7Fu2QPg\njHhX2TNAzIoVZwv8sIy8zco6Qk6Ipoh4ZKTBLowI/QVRsnTD/IiNCmlbhwX0\nSFVezL5+ykvATub+pcuXzQ9tO3hKT11sFzsn/yYpQpIgmFYx/PrTZ4kjnifV\nf9qG\r\n=TcMW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDDvXtKvSr/PKIFberdSHxgsClmKS0f1g3msWugdUh2VAiEAs85BtGTXlMAbgy7A6aDUJLBp3PUQilB1kdJJIf+sXYg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.761aa6f2.0_1590010254119_0.9278645912291252"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6mYjG8X2MBlrn2e+1ix88pZYdKu94QqNKAAE20IdH4XKueSoB7ffzV0VhVWyvJkrzmdmmBQRf69Q50Z76Vh1BA==","shasum":"cb39d7832eb522185ebc4418e3a39dc2f5cce80d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPNCRA9TVsSAnZWagAACakP/RIgPqgt0iD3Lkmbv52P\nOlbCnId2ygi0P6wYWP4/MAkKDKuCG7V1IEsSbcCYICmBykjtCrah0OhFXQ0i\n1i62Ahb4axcpmENEKcxQu9C+/594pOIs4M0iVTQPO5SdNLtQOUpzTCBCWNsn\n1pmqjbefR4YAshj4U+qUZwxawewL0NRC0BQxasAtewfs7+rJU3IXxm/mRpep\nROzQo3Xxklb8ooHkMbqopsgH5xL2dJUCbqmh0MJNDV+YqppXcVfl8T4NO02H\nGF16+5Tu3FTkYDBSNXQxFDRQ6EdTIHLdxUpkRwcVpNa0maq0KdkKJwIsJhp7\n7iWaxHYBcTlIrBwe5lEh5+K4Z+oyxXxSisH9A9yp8tNzRbIWCD/ecVH1fS0w\n1K06Mmsz3ARiMeG43B4DMb9Jtlv/hI+51rgSrvK1WOKrZPb9/aUX3Sc9QHLG\n6OV1KTsIpDQIXAQhmCaJxpFR//LeNrgUQXmyXKKgfQlfx11hA/ZV9fDW6ikG\nLlpIrjN1EyA+mk5mDWVeX3tpyXR8df9Ht2qBlukFvw+X7mldjcSi8SfScyy7\nevMPhfly6oq0PDXZWoqC5GsFt2ktzM1D5U7vlZENKjV7Sy4fHyJDM1aFi8C3\nCOA7CYrXqdbpp0JqEi2/eybXzpRu/Q8JLrTzbHPKZj30lnWnnc/KIh12cF1v\n3t1+\r\n=J1CH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCo+734YsK3jCXtcLJn2X137Dq1eKajbI3n3ITDZiRNuQIhAJAPVTqW7xdGKE5O5oMW522wpvkO4utbAl3Ha4pTSbID"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.f8654c40.0_1590010828806_0.00412157593171969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gFYVPy8XO2EULcNNkJMpVD5/XlKVbOCkeDoq8J9U09BJdJpDMzqjyhR3sR9JA4nfp7nUku62fe5b1NipDXCc5g==","shasum":"5e85478ad61eec606d85072d98d03dfad2aa5d6d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtgCRA9TVsSAnZWagAATvAP+wTD+e+4roNWyS9uz5h9\ntKRvnKbVxVJE7Xk/OgoCw+CTNUYo2g7f2HUVEUCP+3Si7Z5nN97hNIhtebZ5\nk2xKbaTtzotgCe9a7PGCHLysEONIScNieikRauwBuQD0SNvTQ42zzv1aQj0F\nSG+x4+ojkVv06ws2FUuPNYfE/xyCVQRx/Gf8/32H2gWfrjsbpWC1qrVZn9n0\np/yke3EW4ivwlPv6ntkaR9H/wNCQxdQuRfH4AoLO/+1ksvBX1c1A2SlcC5qa\nxx+sHjcJAXOdE7MpAF5tMgZDfUC6QuQ1MBvSFYPtMNYDUONikGmVi7GcpJj4\nwX3b03IGVCbEOirJHvLhZzQsQaILz2g0QseNAUMgaXoRRJDghK/gwd7HA71U\ndg5mFc8oXmY1ddfAsKF3qhX3O2O+3j8qQ9xwp/tJMrtfd5eujEcRvE34RmGY\nHk9/M8LLTtAQNq8/AkB0WkVNwsg2hlJhzwfeqv4JH8HCHUxxLXJwCDFMLQD5\npVpXJa5EdU55pYoS1vcsQSSR6GYAOc6FsObLZjnK2U45Kp2lE6QSdQXWCRE4\n2DzmU9nkIskC6m3yhnQuH5+92IpTf7xMIwV3/FLTyujBaUPGO1+Cl8iAuR22\ny59qaZAyzugpSMwrQ7RbSqFd23yufpamg8VbzfOtxQZfp0T8MayGIqr8FfYH\nTYGX\r\n=E0LX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzPbPSK9At3ul73YEGW5KOhaEgdpF7yKOBFKTnLflGzAiBRQRi662AmW5vftC/ZrTowYqAx4o1FP9SGdxSq8mCz0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.05f3853e.0_1590082399969_0.7213241315177015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8TzeWl4bJdKnjhpgGHxIUerOMHGnzeoyxEfxg7xVKRBHHgt3wPjdRcqkukklpDuZ2F+uQtiHz1l6PVBM/UjrDA==","shasum":"9305e516479904a86e4402342f7a6633914997f8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwnACRA9TVsSAnZWagAA+IAP/AyGoLXzNy+YlnqFy/kJ\nhvEefeYlU6QU6P3DM3FJake3tG5qe2EBHEQUe027pulmedL0RsfxNfANJJ5h\niY6Zb0Q2iwkvBkVPiPwss44ekpXIRX6YMDYf/YV9UqnXCK5cGotAGA2Qm4yo\nwd+oGJGIWdOZ7mIPF8CvkN62fAQemST/Ogtw288gqzfC7DCa8aQE14KShf5w\n3O6WvE+B5QjlFsM2CPxhWkesJ3tGFA1TogeIcL3G/6LE8GIn7vrCqDNhKz7+\nyn+Ou0xbIBeBMiBakqLQi7NuBtUEtYIBs2zD8Dmrtc3HxXAT4krNvUcuayQZ\nT73qMNO91jHI5lYroMc6zDZVLUnh5sC4cwG2knvOl36+6Woo9cHQkwqrVAa2\nfykXJIr+KzdvgyGQhCEk+VFHBTtFz5Ay+emxwiBWpcpnc5TrAOe7I8H8zgrS\n38iknYLvF0VyYDBDbKbCvHeXm3KmoRTI71cKh22LFOWWWbVZj9GZvK1c7IQH\nVt4gOB63+3HdieR4k31uICb6w/xAZ6ntHh/YhjSTjAnVSDdFcn+LRIb+7SS7\n+dKbSVo6N691yPSvHWD5PZl31khnfwHoea42kjbG60OqDOcWf8HrMIrGUOA+\n4wghiYGieMNMnhDnQi0GpPXUwWM7yega1zeqbOK1vr2SejAf/rezVvgl9HKg\nAHDP\r\n=aHki\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDu+3hoz4RBWFJ9XK3jAGGX3ZrtQSjphrb5XSYtzYXtdAiBmdJTUVCKs1BLr5/BAR+8XPlv7o+DD4VJmFsZMf3/aXw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.5fe61f4e.0_1590102463580_0.9723677676727736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vP4DsHQwvOU4I9r0CFp+gBXKJd7NyLl+X9aCQwESEyyYFtUb7i0rB9e+vosN44imqm1nPWrGu/O+Y2BnPXTbhQ==","shasum":"328fd795b463e3d2387f3ff052727669462d03e5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBBCRA9TVsSAnZWagAA0VcP/R4lpqr1XpmqRVzZlBq+\nOkesOa6cwRgwbGUhvaoHP90NTn6h0SLxkR4Zjo8dbFc4mnVlOrmgvcBVwQW1\n3IDZb0Ef15We1FSVFI53ihJJ1sRnacAAGX0G+EMeUuLx1tvbBoejdFFzKOay\n+Ok5dgWvHHEfWxly2/z8TrQFOlZowX52gse2M5Lbe/6shDFUrkjqveU2aYT0\nH11kBsjg1H6bd0yb2SGpHF/9GAJGkIrFdHkoPYXn8zXfaEa4vouAdwf8ZJTD\n3F5XapKbyzwkwy97yQvkwKD+ZJaFY/XTeE5WTCI6jq+/AqkRf+rmm/YHPT+q\nAG8vR6LsLj1P/bUqIbwXL/tk2HCOk3z8WPvwn3+TDGiIZT3IyyY+e2omN2HY\n9C8IpaRaV/E4BpxVvM7xZa/ZjU3DlBPYSJz9OPQLWMSd6YiFPnwZzDsQBaq9\nV1N3ahHojqBhMYhCqksjUbsJ7nl4VfpqBrtQ507bbyy+11GhmRGStNwFh5Kc\nCZ6IX8q4/yt4BEmIBoprQS01KL6k2PMurOdIippHk62ZKZLrlLWkTvtkzF81\n9treQnZKY/657VYiRMKfkipP4LTRNWdZm/072tTtx4G3FKaYgbHhEWml4d/e\nHQt8d7QlkavtvcMk857kYQT46GhNXTiOG3NJNrQtmcxBUU7FbvFbf4mjYRUp\nqb6m\r\n=yHLi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0WhcfIHg6K5xR9XkY/X9N1dNbCjacnkLuUpfWF4MtZgIgJAyKlADI72oQtLEp30fLi+37RyTeEiRzGfQ8fXMtR0E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.17d33745.0_1590509633295_0.8572510436151131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-stGZ3nDFwaH4yo1DJHkmVq4RTxLWaNxDsz+AEoRltqR6XF6Xm4qbL5ydqD/1Bi5h3cztJbILkNnSCystJR3USQ==","shasum":"8d6503640c6ca4d2117dab4e621d494720df8daf","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMrCRA9TVsSAnZWagAAV9UQAKA1VvVncqCQuPQb1xFw\nAldDr7SphDRmjRLFCHTJV4EjVevyCCe6YHfBueKh+SgRPvmiH/Oo3xw8uVbj\nEH3CMZTh5axw1sqJ9rh6yRIidMJymRcD2yTU7KHd9d9XmsVjBGn/g4DnkKi0\nVCBjTdB5SkAfBZjiHFYN2gR0CLM5BxKgsVyaKj6rH5maXzW74ppcf+K/0vM0\nhPLSptznQo6UknaBmEk1DZcB3kiC97/U1G9X4KEF4pSxwONGZQTEk88epVa5\n0JsnvDDdtrYnczYiFF4tlJFjSyYovbStSMezlXvke7eVs2KfMwAmk8a1t4c+\nwvy6LC6Gu0/4PJgYh7qvNE/YdAsZRcJiwcifwAvON6VpcNYMWTzCBVyQjAaJ\nv7AHCNF7Unqm0vEy34fTEXvmkeeoHZKs9K7tQJCTJZmVSNUJ5NWJs47xnFH/\nBd7ciCXUVef0W3DU0aDGBXS5PMypd278QoPBAzuL+Mu8ApTgPPazSGLPmtGj\nIjklmlfw3Tsvr8Juqk13tbFCU0nchUgJTOd2BpvQ4qYwZ5WgIYRoL0+3uu7l\nhmLYtjp1FgKshZuXeTJUubftlw+Yxd3YilTKLnktBcGuyaavr21HeCFIF9wG\nWbjsKSVwBfEuvErSl9VUq06sbUwHoAl5cJvd6nHdVsGmocY9wkH60LxQ/9zx\nr5kS\r\n=auFj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChKoTy+CiO7cj1D4RiezEcsKcTlIzWXCYil8rUpgkjlQIhAKDGOvK+HyHQ2gN5nmLiDa9rO7ngoSVa0F/2Gh5mi/Tx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.e8b52f5b.0_1590518571122_0.06021199266152766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FcxCZi1SoYKWqx5vvJkeFFcdZDRWBv7PQ+XgS/sv6MPz5/7YMG3noUXA03S+INaEgaMOE6LfUbs9+2PJTVCExw==","shasum":"3e883c399832f68713868ac8bbbe53a3a194bcad","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2pCRA9TVsSAnZWagAA9yMP/1vE3ZN2eqWE0XkSbUiN\nl0pZlgh6UGmfgxksPuDHJgLJTdwg0zAjx3XNDK2wGBURMEqVX5VoCfCtigSz\nMr9OWzfNh+uDao8Ofo5JCVaouC9LXT/VqUTpsGYgnHTjPUwptmaGhayq/SQa\nenshMbXWhCHyUVkcfu82FVItnNFNzPP6YLlVFclZBu78vGE+BTMg481qMRve\nr2/OFrIglFwue72+0j9rT6yeYxJMsIgZ8oaeZCe5dUBIhWgsjQquVttiaVX6\nWDD97GIsjgqNG8mvPWkbxqIzHQg6MFVHPFeDBz8XpStUsjZD9G9UNxIu01uQ\nM08QceAyQzKfm1pyGVPvy9kOS0msBQD/jUeDh207U4tRzfIVvqtGYAFiZS4p\na3oqo5evs2XTw5Bd3D2+bSHN98TdN/lQMoDXxDMtFqu8OtO7MZZzqDab29Db\nxAaqydgc596KcM91GvmzvsJm6TQh7GAVwsrX3vNde98BokxgedzhkbqsP527\nO848QF9lN0V/gYjpWdzevgJ2QjeO43e4PlEz6Y78SswPVLoZKkM7QDzuz854\nJ6fRtUNXZukxHo0WMYU+nfMM9Pb3QvOIlhfYuZt9M1VaBGt/EQUWbxhlLvuj\nfD9Kmjzvy7qDk6rzL6NB665wU4yJQcjOfDkDLsEmgYDyoB8sQD8xB7cJO9Qt\nrQid\r\n=ILw6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIARApnx4WGFj98RvcMSY2Zy/RtIIZyPmrkpu2UPc2liEAiBr2GxTN2+N/+g92Cd6gSs+qRBkOCe7lFPqVC5chwasiQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.09afa0a9.0_1590529449362_0.07444037100757805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6vMYdQ4HTC42NVUu5AdLeN7UkeNi3zwkEkYzvhiNJzM7VyyXLx5XhhUwLPav01NJYcrk2lWceHRzh+y07gewkQ==","shasum":"b4f9f80577fd2531070942e804291ea25ab0b685","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbShCRA9TVsSAnZWagAAbnQP/0p7KElnWYhH+VmJfFVf\nAuw2BBm3UtJJaBddBKsy99N5uUCx/rUMvFKVymTzlxmDONusg0Uoe53n5ygE\n28VLyCQAfDARn1Av50dTNYdT+x9RjsYpFktWpta4lyjrGTADQ9LdnX5x+Ti1\n1G9Qqom84UghjtL6KGwqKrzawcyMq8U2rN+2aCAB05cynaT7QTHsEq4IlvCu\nXYTFyExspS1UdZJF1m7f28/TvXhlcoqgx9AWfcqpTxDVYsqWQuGtsxk/pm1T\nzbAISYabzztUspbnezJp1LBMVvPQfzxjx+broxc1xWqvHpgTrUtclHXVI+Yj\nIBiEYWtRcRE1pRrNBUe8QoJUTDTAo7cBIq2f88ih+QRbARbfZ6amyI1P49hN\nbcTudzjJFYK5IzxvjDyQOUEzpNwi/1d3tgLj+CeN1eRQgVqyesp2PfJHmEh7\nJdrVA8zSxdWjj5r/rdxMvpO8ukiD7uiqUOOAc1BDlrAkCDZ3rgWgmDsGrg2y\nHTARHfr5XamAKazoGvw4Zw+TlN9U26QlI3ZIF5AU27W8PnwYejgA7RTzVAfa\n5H3jAHFRtK8eOGa2ttbe/o14+FS319xTSDUgUcq5MMJ+z1zzUWO9FG+OJxiH\nerOIJMMP4k74gfxFpKeLyJqNZckbTJtwYnmilXSOjMQiMnWpY+oJNX+x0hSZ\ngQyN\r\n=Nsr9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFskRKfZDZHo5LelYRUCCiZ/lUVuN7fMkfQWuSshLg1VAiBShDF18BXuc+nV33ghscO3KtKCr+/N9b7Le+yRzU1PCw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.58bc9166.0_1590539425097_0.09659381016996349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9vS99W/FhlqSA59MPAXN7/XAabs4yKcarM1GymeUjtGvSkFf3I7txxJqWaTUkStEiNdteji6jbip0Z2LhUSHiA==","shasum":"6dbfdcda2f7d95901175c18479bde26fda2f1ce9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrF+CRA9TVsSAnZWagAAKQEP/R2q8/Qdu2+e/IvAwRnn\nXrfsr0Tozyr9v4j2b73guaBd5aCqrBSguLoCZ3RzZhDDdwtjd/TvKNNNfuSj\nizMUynnWaMz8yIgrlEu71R3XPUFv/N2RnXGIAvLW1RDkIxgpny164b4Q06+t\nmqrB2M437qqNMECkTtyM0JFo/RT+JSOq+2u+aYlc0PMCEZsaD5fCyzHDW1YG\nOTfBDIkJeH+jsy7C32AnYvwY/zW47QE9YhDgDrfwU0BL6B5XOZI+UOXk0jBd\n3xJdmtlBrgmJes6+X+6uUlZF3IGoWmWYO3Tgsj03DMeG6L05y6vel3PRx+gc\n4SpPU4PCMpuWZ7cgRY/NCkipFTjtpu8T9k4UISiArwuOWPDpJrL+USEPbhLe\n+ZYBhRFinp9uDc4SCqi5OOHZtLGaoB7+U2raUOIWbb2+uEqf9us5UYk3ghwa\n1/b6NC6lFM6JzsjxkvGaTpaPLB4MvkOhdtTyNSJ4bNeEuQFSEu4T8t3WdfQI\nEVCcfhz9Lc9mr/KMSyhqBqzDCQdXLNqGmYUdWf60GduwTIXgk3hI5hQto7Ee\nEJtdGfQS5JNsthyo/y0s70v2SS6bwzYGC3ZLHjaYu47gk3zpJyvcS6lnvZh+\nBxzg4fdPird5KcZoDX9hNOqaEksEXBTWrl+BYXu359XKdVGC5Gu5ZeK9V7Ql\n0LUx\r\n=mekf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKhWNQp0TpRHZ4m8ukAXalsDshUlj0yzqgH4fluglEXAiAdZHgCwHq9VOTyzIFIjs0jnL6PaAaJvQ4kJ4xEJIK/4A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.43bde144.0_1590604158370_0.7591947384215896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-N8PaAIjm6CUTKTNEVeZqbZrBmgufwaaxP37K1thma9mvB3Xcxg/jokxUAEz1AOXI0Niskob+105ier8NQFJTsw==","shasum":"100b57d8dd8372179876ca1063a5bba28f8c76b3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezseFCRA9TVsSAnZWagAA4lwQAJLiwlKGuk8uZXSi4rON\n9NYB2RZkRG5pneAGH4Ymwddk76qon1ovLF/iYrR0dSxuwcTI271mUZWzRWbO\nKxjWobF8Z5YpQnEFfLwxQ6RbKqcRh47FPVUUPNckOgVg/alH1bPmd1qDny6N\n+djClFSgZ4bPt6mU+NvnHcExgebZdZ3crWYYnjxmkTmTy/rgCY0lDefmhkt7\n1FUw9r7ohYxNMf6HbrTdcY5t2z5qwfRbwTo6TOjhPAboxs1NkRTvF0l379j2\nxlWUmOr2aFd0QYXCCkYHPu9imhwtPmfAjv0IC3NF3EZIRgfel0X3JhKGGArX\nQHSyniQQKHeaMK7DFoUJ7wx511KqAyBF/29vj4fz8d6IPhZgEU/RKtIx6hJZ\n0tuh3b4kwvDhd5H8f6bvh3CwAxqHZS7+iTp2OBamP0ypM6o0mDOaP3TigXFy\ngKYX17KwjmCyM/VKeg68huTkUFxSxJ6eIef8XSUD+fyFyjEK0/pJ7RedGAGE\ndzmeu7pXi76CxrF6AyC60E2AMjLlQTDqv706CAla3220C6UbGzup5taN7Ogr\nElV1qHkfcRrnbiyA0fj9NaJFwTEj9PFGITDLov3WMPs/DqmYStmoYHIM7+RZ\n1zq12xzew860VYUGKKK1huBugUokhhvgBMJENx6O96BRZJaqoQYzVVkYwcV0\nRcMB\r\n=wvBy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/VI4esxqo8ND+nBu7/3RkNrVI2xsklgWv/m1Bcu7b5gIgcLqwlqTxet/Ff9B3RPHoKUFHU5mBN2AYgSEGzu2BrwY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.51067bbc.0_1590609797201_0.7098132393566425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KbXrYeogJTAdhSRU2bRhx9Tx6SS57Yk/4v3MZUM6GtkmL8IvRpMfPgw3TUNsD5oxI1jedJTxmkN3aJ060YHHSw==","shasum":"0be1804d1933b228e439f87ff8e2d1c3f27ebb4d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1iCRA9TVsSAnZWagAAAgMP/1rTlA9vcIEl3pJyceWr\nca3Vv5bx68YbsqUqeJ/k2iWQeOX3n6s3YWBitL4WRiWFkdKq2uZIPz24oNiK\n4Vc4X/aUQqpdpnVxRewtDb+65e57wnEmZiHKXsCKd4HGBTYr+Bvjc64WXeHc\nkBA4M9lJI47DsJc65sBjD7WEsubC4iT5KMmOoHqvnJ/f1B21TJb84Wizz/+2\n6bUXYmh013goGjYkB+0wgsW36LuZW4fh0WGY88JY31tcfo3YhsTOs10tJppd\nMxk+EXqCHuGvusIYilaQlsRXXdX6raKzLDH3orqIxN9pddetMieLK5IgFeVU\nJ2qkrW7UOCUe7dhignslW6US8rj4fAiq7WBxMkARi1bO7CEOUyULAJCEvmFZ\nm/XwDgqewfG4ICSnvsfe8qXu7Oa5p9ZIob57/twDTi7D2wL/0Ex4XRvSRcAs\n4NcGpMKGXqkT8qMwsw7lXCfSL3lo6h0Fl4q7I/9dGPqlPz1h8iN5Pcs/HYBk\nM3wtoC20xfEnK6iIpSdjs0hqF1yuam5bjvMZ2HHxxn0K5lEyEwkwFSopNajP\n0NTA37M1SKH37TB3QxD75qN91OyeIuN0CR3Rs6rizGLoIVgS5BNR5WFoCAM1\nsbHcrMndKlILCrvvTPHQtmfemEq1anY15CwkB2AKdEuRN8QKVN3pk3T2hoeI\nHA/y\r\n=poaz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLBRZyoXxAQWp3eW69TG6/YRYT/h3pgf+0IHG/vs7DsAiEA1WizCnqib2KALfIAqMkubWccOi+/3BIlmqEuxb+Q9QQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.92751ffa.0_1590615394036_0.4038292111431123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rUgmxxEpmzakmawCUnambxHKKn2l9X3lhqd3EHEsBfLG4KB8OS7cJBVRgq1kg5MAba2QEWWqvNekLRNHjaVsQw==","shasum":"a92a26f3c291669c6172a00473f6d38647dde653","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A24CRA9TVsSAnZWagAA7J4QAILfj7IShEwA5ioO7fi9\n2z6w1f9RGjHAPx1jlFJ5nvnsL7INYfStSOrpKC2HBFxqH0W3lvbA0SgOe2EU\nYEBAa+hBn9jG3vFRuctO02rISgmYRL6ktjHdxQlxbbqwTKhdq5oyJsVhah7a\n06RaURB9Lfjja2GVFccGrS0+foqarsaaX6g21xkrVKCRCIZxWVCAXPoMVTpY\nuEqwCSRCpwO7lwRgj9/cH3dudQOfJ95srXyuHVZsKSJO45ByTvnNJvWUn8Bo\ngKpwzaWyBR/fab0zeHLBKvwueC0RFKA1J9tziZDREXwPKA3DzJh/UmiOtFS/\nohNzTtUhm9CtBSYg0PbNp+eutoYeWZTJoof628ckJHNeAK9DhFlp4gPxbxg9\nfzcIfEQtBzrOJ71qjAJ2TD21fWGV2L1HB3pcbFWAKXKl1v+0f316nmkQ4frv\nHsQrF2G4M6t7dNCutL8uIF+cxJL6f9hb69uGVOlDeWd1MrLDpHXuGQIWTEB6\nTcI5gpfcwL/SsjWiXJFT6vIVWWCrzGmsmh0DqprQcSrzzl/83COBTwq1pVfg\nuwW9m838RBn+7xzL5ph+zOZEuV0f3eZvQEoAfCWLsxuhTratONvLo8KvlB9p\nnadUXUI1ceBnTeQqddmVm6W6O0ufiUK5qe4tQlbWVZGkGD5wVe5AnmASUB6h\nCcfM\r\n=IOqe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1j71MQPg5UDk2OSlQNDrQYb07/lb8ma0BsOOSCPGBBQIgET6Iek6Nt0hOdOHd9e5FkhIlc9bJkZa2bwurHkEql4w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.aa2b40bb.0_1590693304465_0.5126872261503586"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EKXNUgF1LC05Eisv+C8fChtv/4UaZskI2T0TuvbdPv7vFa5Wjl8cifIZxYiwdlb5ClGJHR1ys6IK85MhdNLkGg==","shasum":"50e1da81d3536dac003c4e3d368ec2de009401be","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqxCRA9TVsSAnZWagAAjx4P/2Xbto80xojL73h0yJyK\nMiMhzMOWAh4PpFq4y2KWZ8kxw/s+/hOHMdz2ad5gcUMLzFw1dUaQ0FG0/g9r\nXEblmP8EF7g/M71zEJXViDRRUJBA+SVayVkDnww613r+JGLkDAGCFhs/2o/F\neaYnN4IWBm1iHXNBjLqrNPCVw9wNPNCW57q4IcBTtobgzABAvNP1n9OSHxSz\nM416PanUJiwONFd6Q1kYcO5VZStl/VB4AxKivsLnAz7a1bU5bEVrW/fHvsSH\n/OAUKX3aib78+bcshyWslrAyeGFgGxSpwCgBU6GhShW7D9+u9qbOGNqwIPPH\nj+h//BztdeCNt0Z2a0nK+qcwKFtCKEtGREmjwO+ERx6gI38EQMvolBvO4i9Y\nbeguW2HIsjVFF6Ic83mjqSmjtEmPhdnbIjHzRgqMB1ZdfTPhXlR7Z2hFIJ8/\no07nTLxxhWaSE1Op3v7cjiMN9ndTzELICtxZnU+rh2BhN4ynZT0q2X+bpxyK\npec1Q9a1iiSTvcym9tscnJix4EC928HGA/GD5oCv58BtdKpxTccsGIBwWGIr\nICgJpjL9wdaDfPIyvtb5qO62PoUUUtSnXzx+fkFOIST/siwfKBQTdztr1hFK\nNVB3oFYfobrPdfifEZxwnwl9piO8y8dFl6AmNH5kWUOo8i5FiJz8uzCAWeb3\nDrD5\r\n=B9xW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmGrvSDjEWk4ulrNDLcwD8D1p3I3EZGLbmC7qwDr9wTwIhAI5yeTsns7kxL7EWR+GqfjaP/65jgopmIrufv/3gkw+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-fab_0.16.0-canary.1a870a01.0_1590700721137_0.1255183217145226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HSIrwtb2dsQ7n41eMd3BWjzuWww8RPyuLsSQV03B6QkmXHnNe7SvUK5NUEyW9HaoQwVF9yIzuUdxndA2RCmJRQ==","shasum":"414a3338d7314f51a618efaf9e56abff0ac22f9b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":61246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z95CRA9TVsSAnZWagAAd7wP/3TIIBZVKQBZ68WchyKS\nsj282fDI5cRlAczsVbidCyOoymfTDP6jsexp1i5eGH9I0M+C8XdxXtLFOXFc\nuGM7QPuJqV+vIaB1cYGXFX1q0zKybflEjeVVF0dLkygsbFgKWMnZMunyBG8F\n5Bci4b9GCP5TKKeHvl7O6lmfewzVV9LgYeKzelSzmsyU0VomhVmpBg9i5BGq\nvoyF5eZdNXG7HNrjhkJ1+MqZrom0gpP0juloXW4dKJHzC3v1d8EDTbOWX2bZ\nRnEv+HDUyAgcAgPcLPx0OswmeLNFs8QVZbV/IzAIRZzSQ5wQUddU415tBuY0\nkKVwkiOzIPN5H+DwON+zPPult04UBtpHJYbsTfHgFrKziVyi0yLofj+ppvDo\nOICvglcao5tbryRttiJk+r4Vhc7C6gkVmxOMIoLZKmQ+XZbqbfHKlgyUAbPq\n/ai0mr9YANRUxWg+RqfDx1XAvPMJj9AQkPMvk2M40aMkO2eb+G8it5oq/pvg\ni959+/wBZON/TNk5xuQtqX5i48cIcmKgeedo7RnayaZd334BMYljWkrWHiRu\nFqwvwzOU7cknnTnpdySai+pP2P8rwwh29dqlKQM3PjGViX3PW7lDbrGyYc+2\niyx3GI6FhvnXi+QTI7vZ1NphULe89SCDGrnVvyvqt7IqPXWRBgaka3B5weV8\ntX5e\r\n=fji/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGAbucHRaAYRxb8IA8791gol2brNZV6997hrUurgG53mAiEA5pUogz05zmt07zTYAi0/RYc9HGyan5FRZf2Sg2h4Dmw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.ad57d086.0_1590796153467_0.6615305924270183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-N/mc8o3ff/69f6mC09HBiS6mR9NBCpNmsQ77MczRDuHveZ0phV18yPUfc6kBgZKknWb2DM18BEhlBBKwnPQ9uw==","shasum":"43b377bc685eb0de558459fae35509f9ed1124a7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":61252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqbCRA9TVsSAnZWagAAdpMP/i86Tf+V6y/xHXBtHK3N\nl5T8YNpXdSugnPP3VOCTPuB5/XA7/s6yFRtuvnEop7T0lilw5ZrAExP9mH+d\n9MX9/8iV+Mjto1YwwLh2BVp9+Wh8kSu1FCsDazlv7aV0kutGyaayfJwfNXIY\nZ+iZ7hv/zeBe7WBy88GFcL5Hvc4O39FlwLs2b6LAVk5vjz7GPY7dIYgxNajp\neGsSQ5N1dWZQn4xatYJvJQFDqkQJ9rlYgMapZ/9RrF5Abhj4kmXqxVTlK+rA\nZg2kRHH+gxQMtp4PQU8C5zap+zPyb3wveLqbNAlz2iGdGfjP5exDZNAMJaeK\nTJTayF7cLGC1tL4OFmbyONb+PckiSGPhQhuondRB1RK+hMr66wYLLvNoFA4v\nsiQiGMegKmTZPw7Vv9KIsAlWvV8kBsQHiTjbkxl11BP3bQ1XlWXJkL6vQXe8\nzjMLlbNl2Pgb4RfOz5POVVZl+cmfNy99xj8lrioeZ7kKnBawl9cmRtrdZiux\nwmocR1u5JR98CMVW8UwTMfYHuSe3nxkG+hNgzW1ooPPuo/HtpkePK7SGjTUj\nUF2PNrcWi/g6pqdK10rGR+LkWOiW8igpmj2K9Ym8kEyrIE6MfOTVR77KlUON\nXDiD4BuhJEAhH28kWlr1UozaTvHZoGb4+xClkXTQlauMSyeN0pReDiCLqTQD\n3Eez\r\n=Sg7+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI50omXHjFbsQqVUfCxVAer3cKsYEY01XLtkWgT28SlQIgTOpyzeR3gsTUR391b1ThbmE8A5INmeXDFV8jLJSM1ms="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.3bf2b4d5.0_1590799002352_0.6501048168309678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UKPI+6FpoxDxu+8rfHOwcb0Z23YFy/HUoRhfoQC3aV0tVsFHv/TXVX0dkjUCIyUtFDCTkbBzNOo9wNwfmfUZrg==","shasum":"88a0094f3bd6ecaa3c42ea1b600b5776d1a5e7f8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":61252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnQCRA9TVsSAnZWagAAh90P/2kDYGPaH/BazNoNxjlo\n96bioRS1+bvQUqWQtFi2qMNEpVhYtBrDVBHetKqDdSr+xylzi/n9iekOLE6C\nzqNFxkkgDPFu6ualoGbDJHrUBnD6rVB8gQYADvhyk61fIk0YdC06gzTxN5F/\nQLzvwBFxdIEyOlncWPgP+N8Ri4t5+zRNXGPQWeuIxiAZPmAog0N9X7k5/N7C\nsJwn8526iHlHyYHzR19q00lyVORZjKwnwPY1Ed9U1928XBIid98vRTIlM97W\nCJwFDAVxXZAAHIRMn7N5K4otCmEU7Y0roa9dT90blyh4RueVzgAHuUCwl7Gw\nFivJa5+U9T0eMTsHIm41TNgAEjobCC2AQI0z5DiulkAZmY9VzX5eQJi+2nQx\n2TUxFs/L+J7ASFntdZIMPE8/DONhYKE1TEEUo0wLjygR116JrwFiuq/u7z7I\nuipkPvvy+G91lpr9Kee0yc/5nBXyzlVAoRmVvvPX3spxOwkKEvB1BbaeyEm5\nXYRt2s0lROK8ZHRJSodbhX4T5j8mn/cfRX2YUp69Y5R2VGl+j+McCty3FDs3\nhId1W9saM1PSTu2lvcBdm6owylMko6LPY8jW4sYrzDzp1iy+t1MxXn3Kz06k\nbR3UCRNpAd7QPKHwRhNfLR1xqHitKXIORIWBXJcAqMn3068AHQCkJzcd6yIP\nbFWp\r\n=KblP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2aMBRGkWV9BUrJAv0OedX7wruz+g4+L1pLXwi32GynAiEApN1NOGQZtVSlXgNMZh/9eaxwjCEKJi2qGyB8RjKdrug="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.ac05f090.0_1590806992393_0.22312864930436227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-d5DjcimPc/f7ogFR26MY6EwHWVXc4hNYyuWxilZXzMH6iYYejr3nXaq99H/+UXn8hhlXndxqP/l0tdw/YePdmA==","shasum":"ccbbf3661cdf54140cd8879cd08dce42eff59905","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":61252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cthCRA9TVsSAnZWagAA6h8P/2Ck2SNW/qUwDUtuKHw9\nKaWrKCsSL7qFxNCy1iAFa/jKtxO95n4tRneMbAIQ7xP668UlmNgfYui1Hb0w\nVHOSF0X88o3n8+fZXuJUCcSE4Of/zrNBCiR45DpVP3BqME+fi36qBWEl85sb\nCkna+SpDF2zE7O+Xt7Tc68HVSPZI3pakDbsVSkPiDoxw4knMBD2lZp7jlCQo\nQSzLvyb5jokeqlW/xfp7yhk4sCWiESlEayKfdLjYi8Ynij1W/SIXwFcm9HO9\nkXK9w1J8afecXma3CMzLJnjL3GqoYkERfVm86yBpMtZsUm9iwUo0Ve0F5Drj\n60RUFot7JQ2nCd2y717A7UTPmq/xiLN7iBQyHMOytRRpuZbWAl4ToI6Veu7I\ntHhmFG44aO+4FqtDRa2mVbW/mWNX8xGgzt0lnaTameOx0dQeeM19Nl2hhZGQ\n7N1AzFBdFzwxRG6dJ36EQtNE0Rj6BrBIDQ9MYBypaILHoQgpQ7qkWIhooZqk\njfhM6snHL+LV9epDyGV4V9BX8vJzLkCfPyp0TWELMbg7W0v0RxhD6EFhMDmp\nbJ9dEPI0gqRFf80bNyLxgUVa1XQ8UNxUYRRuIfOWSyfQQAMRqP5EJjsXs7B5\nhyJmbqhimJv6WlHwOLX2J0UFMML2uvIbBfS41hq3nzwnMfwWSj35JxyxOWTt\nHXR1\r\n=Jwqr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjqDNePVg/CMuXJTItMJ8dZXoGs67QTmb7aisXLXSrNAiEAyQOFIOiBVbeC5Rd0zMKr0XduuTFrnsaqqL5wTrA5poE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.0ba7b095.0_1590807392752_0.3683418146936208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-fab","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-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/fab":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eZWoLL6VOjLR0ZPzpGDXUBMiPT6g8J9OzTJ/f/xgo2Mwu3NKhsxAmrwGsaS0UrSwKZBRIH0aXt+kFv0iUy/8ag==","shasum":"46764b2e5310b6e09b8140e8cf1032f31988822f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":61252,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y83CRA9TVsSAnZWagAAnqUQAIb3nD9ZNP2QfjonKmlM\n6yzfZlghS11J+FFK1yTk9CZ2+bMI/lOB4/BXLY9J78NtA2MIxAac7hMfhJRw\nv5TSKWImFJtxlOvs/gxE16tGcc7WjT3kCa8C35UKgNGNehcG35gC0aYlLxWs\nl6u/kPE+MibVbG1+pUGqGzGQJCAn4IWSlC3wDmlZXyQVDiY0z9nK706bFcK8\nwa6JmeNMwwQR+mw0iziWHLTcXnL2Id7r6x6s0JLKDvDrlWXDKW2yr+VNGA7v\nmNREabKJ+c+G2nebzQ+pVFp9cpoDiO8xUuBSd/1eaxZn0MMlIL2Q28t6/7sb\nUkLPwwYo0Y3BGuRUPBriyAOyZW7j5+hVBhS0q/A/ZHfDEuH6t7+TLFRCGQBY\n0FK7Q/+b2AD5KUlb2YhGwM2Mppbo4bkrmx5CDxbSU4Y5VBHWMK/SK81569bM\nMhdY+MeS+DDiUnhUS6rtEWMUZli8f8vNwU63lblnpcx3bNMYL10Dz9p18ogw\nB026d1KWLyH8XYnfM4OWg6ZyEeimlqdWFIiJOV9wewaqTsTqvQJhj2MAkQJM\n8mqTI/g08MEGPe+bu0OiQRnLUhOe+ekdcTnTImO1x0v63kPeFhio5d1uOz87\nHZBRRxwLdefYxhjv9FkCNDvtttSnEaUX5W13xteB82jqlfgcfSsShfen4qYb\nkczD\r\n=0SZn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE958RZEx7lUX/dfupsFQWqU/S3rZ3HNilhcANTfafzZAiAz0dTA/nJSM74urGRGip+fuLWouAxUqT2usT9V2whLWw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.5eaa9bac.0_1591054135293_0.4184883442883953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.5677ac20.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.b9776b1d0.0","@material/fab":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-icon":"0.16.0-canary.5677ac20.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+6310Hv1W5o1+gVf+43sj2JDJaN+waZog6dJOM0+WtPjk7pccmrcQlBhI047DpVu/FcbcAgB3fWLTuZfBu+uzw==","shasum":"f127b4ec336f3fca64a1db4d5972425883f66600","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXfCRA9TVsSAnZWagAA3jYQAIa5CjBvqtHzUm3ZbFxL\nIph4rZU2UTtFBuU553AZ3XIiKeCtwDULwZ13gKIukci8mJ6Ml16O6yImMam3\ncXTyjLP7qf8uAm3b/B7W9nyy+uaAeyXMQrNR3QvMr8WcfJUnZOrowIJ7yOjc\n2TbViuEasyCPhnB+UbIJ0swFAcaFERm5lcYVfkKcLrFE4ByrzBkjzV2g/HOU\nWs1TxytP3jtajx0+YYp9n7u5WbG2b+mBNy/pIFlF49WWXFAPU7s2vEE+BC9b\nq5PQe47glurtBohOJCO0km1lW8VTM8EceGUH/ve41BcH4ABHyZCk4S6d1Ean\ndiBdySVYZxGxTq8ecmV+p6NYlfZdkDz/DtFzF60uojSFC3Z+WwMuv8tq6fqg\nWWw/UGSLtDoeD/y1xiU95ZErK4L36sylzY03pyTOCZOLUn5qRhJoZHr5fpCX\npYP9Jfna0YqiYz3gK5EwY5+moHKfc8biOmhECKOlXi8yg76O5mUesKUscXd7\nBTGAQ3cthAS+MYFQlO+CYbD1q7bzKaBuLcEpqHthBcw2GZ1riTIIT4yHEAqv\nRumR01kbqrCrVpPP1chqjAFHvtUI+YEg5S40WR59auM6lbSHrEAUigqWWmPL\n4nXlB0osO3KWYJH1EtHCE7RXMDMoKr8F97rFj6ca7j6Hs8ILiEIu3StjUMKO\ncoEB\r\n=4eyv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8ziRK4qwM6sb+B3pid56kwfI2aORLYqkP3RR+nJ4IJgIgec25jmyiLAeZUMRkbUnSSEy5n4wnFdwleNndIAnDOPk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.5677ac20.0_1591055838869_0.22047861477277975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.7ac6bff4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.b9776b1d0.0","@material/fab":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-icon":"0.16.0-canary.7ac6bff4.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OGHq8mMZiUTgEiYVclT9Isup03zdx2knjwtqAxSBbkDszU+b/wqwOMOx/xbVTJf26wIlNq3GajzNmr8ETW9J2Q==","shasum":"61ef17e5a972bd5c0de9430dd1e5980803450450","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZovCRA9TVsSAnZWagAAZ3EP/0sbRA2ttRDZwfMVzuTR\nTvyi6QlbcaYlPZFZ8Ny4eDyfV5vxAd9kZhYOKVQt59FsX06cL/KoOJ0PhncK\nJsQeigTCbalWzsr1KrjqjNjXCwrx7/2SKKzFMWybdPv79r6qEGZxarQ8aqtY\n+47tDryTdPS1JrKWG5cUQu+l0vGKef5YezoaTc1GeoRmUMBgV5Q/BItmhbN5\nT1Q1hlM7buV8CG61DHKSRpJ2egUHLcWl3U3WgRr7KPL5RNRDWarnY/5pD09E\nKsh1rLHj4+TBZj4HynTsWwcYgUHGcA+moSVG/wgJQqA73aTBBPdEbu271bBK\n0EnioCykkGwPghwwsjoJEMx8FiIkriz8EsKq4w2z493G+xomPpl30nU41Jwe\nqID9w8C7YKjCsTRVPuNZEcLj9xjA7MQKIQrFIZlkPHlddMSd0q9hQ5FrrVEb\nfKZRL2ZXBjEIARGIeAv1flsONeWH0wfEAG3+pTA1B4jFYi8S+e1pOiAuC0eb\nbzrFeYAL0MoP32br0Dkftmh2jbJA5tQAgG5W2AbcBZRtuq9cB/+DMPaPyGIY\naFNKdzd092JUTG61gz+yINbXRzMWvFPmVL63IEh3+tXcQUG9zdMaabWYSkQq\nXP1iUcLZoPzgrbz/mV7jC4sh8oSwckRY4iycKDtRHfZVeh6U0A3y7W18yrUl\nMOpe\r\n=nVoG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwcqXl/cST7eqlnQ3Ey/lRCjjLVu2h9+fYOfrqYR5/5wIhAIaYx64PYuOOWXgygx6Fzehhsoz9wzu6+WQkzxvqvrb9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.7ac6bff4.0_1591056942492_0.3888398708452214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.d45622aa.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.b9776b1d0.0","@material/fab":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-icon":"0.16.0-canary.d45622aa.0","@material/ripple":"=7.0.0-canary.b9776b1d0.0","@material/rtl":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-e1o0uPuXBHgouTmIr0i0RN8I4bywLglQ5XF/IRo6guNslQGv4MAUgsugAjRwr13RrQ9JhwUkFqApr8oI7gTsDw==","shasum":"f2726ad59f5615185901e293217e70cf6449eba3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uSyCRA9TVsSAnZWagAAX6QP/1+MkwVAC3pNQWwIncKU\noobLC6cFYKDnmxfaIvB4k2Dr41HXy7ZHFKcRR4A4hOeiTyuD28+SFER84rDq\n63xtZWJFnUc2JOr2R1AkeOvBMOxb3YuGhIvpJROQb+RvMBbOXhcw1Ikt6uwC\nAlYyDYew0N8WQghjXTzgVYfNvjfuOo7gLleSQS7AH9tU98nTbp0ccCXCA3YF\ncpi2sAL4UYBhRiLtcEmAylJN2mm7uiUfOnoz6tsqH2maxslEfQ/yDF1+WT5i\npnW4DecDP1eU4mLi5XT6jjCkskcwyB4Bl22gwn5Y4P/ikIJmi/y1lQeiaP5e\n9epBxCTz5Fwyh6FpewXI+MnOHiajLM7EmMb0/UcpbJaFGMKNsIk5K9e8BCv3\noenabZtW2Ok9Q0Sk8VkCj3XYZNXHYIX8hhvNUDsuqzQnXrTld29QBTTr4kcj\nXJGUkOFI41M4gWiA1YMFkY9H9TUHnOobCouontNgJNmz7KrxWaV+L0tsiw0R\nkDKV13u1yape+VKgFhpM/4PvvD9ue/eNCp90I2IFko9jVEC9zzxh9l2I55mo\nvMxDUWW9YxrS636AGfmHjLEnm6B86z2PQGsZQ+5e7T8sOtlb0IKC6tIpk61l\nngG6VJl4FwQah3A73BeuvfZaXHG8uLIiBi11qXRsznGLjRavdU1hBqRWSG+8\nI5WQ\r\n=qL6r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFxROmk4HiYgCzHsLn52Xn4ijF6TOWmpmcrp2NTAZ7YwIgaOXW9YHtAkMO2+MsxBaUlzVytnrWfULVmziVQ9udULs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.d45622aa.0_1591141554468_0.6571606111438328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.dc26c709.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.a0dc2b5c4.0","@material/fab":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-icon":"0.16.0-canary.dc26c709.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-61pqQcW5Wty9SPsFuhbEFEGss3olMB+R3CKUixjoJtKQ0F+LkXDNDludOgBMTo8+PCzZaYZOICX9AxLTaEGYWw==","shasum":"3bc6b9944ef5bb9562218e2a04899d79874b0765","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkyCRA9TVsSAnZWagAAJmEP/i1+F0LfvlU3Gm6m8L6V\nGrTfHUfTkTFShgwLiCWlHVPkiWqx6IdpYzCCxvwrkmov1Hrsfb4SI5I34dYG\nzLpC/OyA+5lLp8bd4dBce/YCUYIEjfIZLP6x5N4Vl6WvG97TdxrdjZHotuH4\nnUvSkvX/skd6ZuUdr1TSlwVUKMdZ0N02jDTVSow97xVVu13Ua0Ho8wRw3b+H\nSiG34vGttMxrg1hWTkdZWZmjzPvCQQrl8PwVL8rwli2WHl2awGcytEF1h0Uv\nSVXcPFQP74cVFdG1GnakeKbYei83HcyWM4hx2aPuNCNEp3CJI5EVb+fPTkoP\ngXT1+NJM0X6+YYzQx/NVzpO0Riht+/pc600LIPBx0JtStnQmqibpGTtjS8fE\nD19INPJuaddjVGuPlfsVqdmwpsDQJQN3JW5KD8PW4khFOkk62jAjqVNmBn0c\nKUcRFUtqvK5ZwiNupcXjVdyxT9YxvuT/q3dh0gxrbrsg1oQ+MYNPN9b/44+R\ndPdr9OzpyaxTpMrFm996q1j3rcQguu57+T1mi8EOklqdLuBNsfB4o/dFEPM/\ntnuPvPgrbYB58LXTHiWMzxXfQHZyhJoXnaZc6fV30Nid6IUR975N3TVbMSwI\n/MGrLLCqB1aLssDaBL1fJaVvTqknzrUJi1B3OHR5tBAuXW3vVHdl+o5UUY5L\nPRHQ\r\n=zEaI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp2hgyX1PaCMqmiFadZZ+9qPOXoFonLesHuiOdtpMB1QIhAPpxIG5+tkYM24USJBUGgqYSIJLW8Jp6QNQrUq0zwRSF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.dc26c709.0_1591388465671_0.8828875780942635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.b9baf6db.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.a0dc2b5c4.0","@material/fab":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-icon":"0.16.0-canary.b9baf6db.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TeaibtUFJsiaFoEekqVwjy9TT8j1YNEJGYu55E3d6i7zgQslCCVesQBexNaumJN/JhS+nsb9e5TEZ0ZRzF5v9Q==","shasum":"6374f6098c765cce0d65ee5a59f4224a80f109eb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmFCRA9TVsSAnZWagAAjYAP/3rLv1aVzMSTka7Ef0xB\nhstx0Epw+t/juXR586ScSEKqbd1I+w3zT3BgvnnA8DbnRNH0hiPjWNqcQ+s2\nR0oTS2dUD3DH0khlJCT0kas684lxjTSHklcASsx95Dggu6DpCG5Qr01V2RYd\nyJp/EqYRPe5jrtPfpXh8XlZR/BWL2zjp3cBUuI69W7cOnTlNEX8XP1Vi0+Fe\nFq9CcChMNTRTdnkQuTd8g9uIQJj1jg1rdvtchwHFw6EolVHW3U+1hGO3yCWE\n67QSpa8Dyh9uGLeSaflCBHQocCfPg7mGLZ2DcvPQOMa4TwXKLP939p7E8V1Q\n3GJ8R9tnBVsDgzLCK6AgcQPZTMa19//YRAD6Pz905p/dDbGD/hqnSzhlyldI\nWVVWgcchVUtKVr0eTmd7XAvk4QZ/dSyLi7lknYwKWu9ngwfLF81rrNnzrnIP\nyWn6Pne6sBl7mi6cOcDsy4ZdzdMKxOAWmzEHoo1wfbM9j4pvlJTm23r80rr3\nQR7yye0ofDGHEbaZNBvfO/OeLoyQgm/fIfD0XcpIgVSCIseW3kxWsOt2bUyq\n4xgDvg1c7/tv+JOJsWCvZ53rRSjxPuzFdwZeb68IYQ4CIEJA2afsyEx+K/n6\nuyloX1jj2sz5XyEaCf8udGzaSTLZ/AVUUkg03lhogLQJt7Geil4TUVSDJmAa\nOSGt\r\n=YE0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGS+4Ju2roeR1ahhfYU3ccTDfx790b8DM1MYx0VhGc2iAiEAqBqElVI5+kcjEU5orelyZr81SMGTYls8yrsqk8Gx3To="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.b9baf6db.0_1591388548797_0.5199403998348371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.e0b8c9d0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.a0dc2b5c4.0","@material/fab":"=7.0.0-canary.a0dc2b5c4.0","@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-icon":"0.16.0-canary.e0b8c9d0.0","@material/ripple":"=7.0.0-canary.a0dc2b5c4.0","@material/rtl":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TmtZW8pTO+onl9A5JsPDLWFTJdxnQCqUhO9Jhbq6JUHNzWM1/PQcspMFgcepgrQJNoUJe1a1SBCkMjXzDUZrAg==","shasum":"ff51f8ae41b47c4f80bfdccedf305c40e8543400","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+WCRA9TVsSAnZWagAA3skP/i1mfDDF/A2Ukzhvvm3A\nKtOTIOCdTJ5QMsmk9stiLmcLiOCy516DaDa+50Ny27ZchJJw01aDLzRjeqkO\nyYhit8fpkNZfkaDEfhD7oyuh3sXlVynNBTct/clitWnU3lsiWxzL5ToJ3JnG\nAmOGxboDMWxGhD67yhc28q7DhZRkmBVNw0vBx5eI/kmw+erQKBs9gt8VmxL+\nZz08BZU3CCPXZTOJDmeRAYdkZOpRgdJ2tfTgSn0H13tx2WUsvyrAdr4dYSOP\nQVXzjeQovOygiqjmpQGUizSda3hE8r/I0UgA+tmsPsovax5spIZ1QVL7FtSa\n5prfTSC3mT1s+lNbSzdf9F3VIbylJlNe15CHrJHwovt2Br96qTb/djN7Vy4a\nLuE8/e4gdmwfAer3u39IfQzp47uWtt2gQuDjDxo+J0DKofRR0MPHSfQ2XlPf\n49TIvpz1/VMcJYx8UdMWrURi+zM5gyRWEePPEsRtxSojDM+fqqwj/8NNcsLh\nFVjsDGnySAb5od+T6AQin6s938echDZe9nyEVQLuLu79KF0Yt7MzLlSNCrus\n0XqJ7dNofHYh5x0uxBllH58IWlWG12Fsq9PlXviYJ3SyJ1npeVvzJfNfEt5B\n1TCY7BwRKannjXRf8PLbx+cY+HcZvlQ8eRScb7B9wEO7ICfXmIBjzfkm7jo5\nHbZH\r\n=iFAF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCprp1U1iKrTLhZM3OdoYJHu6Vz8MbbWoIaMzTZr794VAIgBrBZfWruNGR2kH+Q2W+EMP5G9tnviD9Mvq0JLto+ZPA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.e0b8c9d0.0_1591398293675_0.507242596140715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.51552859.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.39e6f71e2.0","@material/fab":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-icon":"0.16.0-canary.51552859.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z2grqb6CxgxHIIXah5wMAny01e3iownIZgeb+Lz6jDGXvp98lgi6F2Q1pAT3+VFJXrsHzdOoSX6kMUKEUCZDzg==","shasum":"6d3025f5ff10ff468dd2d1442178292f14f95b74","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRoCRA9TVsSAnZWagAA6AQQAIY/ZDfHU9K1txYN6YPY\n7B5M9beB0of6WVQdNTFOu6mZBapfwgIynzJ4xHcigaXTjAb9DTVKJbahnE75\nV4Hdy5s2EWfWsy+pWfLhYpxjffMkc4O+rKY3QsjDVRdnen/2bTFmu04WM4nn\nFGrXk0zVtqb2YdybzlXix0X/2AlY5BFS1Dy78RCOwZzlNXgvwjJdsNuGDNYN\nxyCg8zAcaqrYFvguNncroVIW//DkPm5wqRrBOg+yzFYQhwd6pHwHwKfowTFc\nDLbyr+Omt1Ap/S4HVlxLxvjfO55/LHY64mQnfwkp8Uukx8k+J5g98D7MxeYC\nttrLL7TIYAiFdsDeaCg9bzThYZHHTTsLB37aj683Tc2JGJzvctDyQlSKX4T/\nppDdDifEbM0x9JC5zuCWWFoABETff1ynMlYQdUBGqhRlzcECywFTPBtb4Owq\nXPgsm383Qq5qYMgIZ+FpKYDNQY4bkZTWAlFyyIk45LmQ51DjK9hJySWvaZ2e\nKlp+f2mmk+97/qtmN0cvB5gJZ/Ugl7qFF224p9QaFtBPaKjFm/+TRmZPZ/V2\nrbObmPosjuaIbAMY1+xZbOm0xuv+fZ4oW9Tr25luPZwj2LlM4WnxNFMSWxP9\naKjBBwaOv0dN1vprNhjMK2+U+WXGo27Kh4Tln8gWlc30TqasO5uqHwDVkBHo\nZYFa\r\n=vTh2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLOecuUZM3zkCpARZdnLYBSV7fChy5driEyqUTkr6DnwIgWwscf6b0AqGLGWybIELAgqCTQ/1ed29Ci+dxZ/vuq3g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.51552859.0_1591747687800_0.5305358083289167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.2e269285.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.39e6f71e2.0","@material/fab":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-icon":"0.16.0-canary.2e269285.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VJhthKptJqj+oeamESXWZZArFVJuEqD4ENleMzmaSewIoV2o+yh+tMqfRg+PBCLPjq/BvgszKK+338DhQA4Kmg==","shasum":"1ffb77e67a75887379a96466bf94f16538b8ce99","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjyCRA9TVsSAnZWagAAsqoP/3qEtEIcASlaIJnxia0w\n5qtb9iLnCru+m5UNcZfWSCYjpAee8TN2Mcq4uj+NqHyVtpc8G7WWjvwy46eY\nu8MCgYaN7ufIAjLfotySg5jnDP1Ou3SrXPTm6bP7SGP9gKp0tgO7t8nLZLDL\nNy08aLy8O3hq/1WB82mLQp27xCp7X+9eqiUtje2CzIgrtSOmfnTNULrkXatq\nT8lDzFwgsviq8yZfZ2n1RmACRnq94oaIcoqWJ8SydZnK5ZivFXq7PDTaEsrB\n3W0o7CGTLh3KODg9/HD0YW3wG5+fGJUioktTkxHls1gOwTYz3B5D/mmtAWXe\n1md+b2L6oWmeePQZvZcAj0ULT9GEJleCvHwXhz+R1MR5EBxQ9NWz9uDJKQxX\nX3nFcLhxrPYhhGsQJJvX/8fLmb73hUVwYWRWggzunpZ5QHzgW+XkB+WegNCO\nTPRmQ1PPXrXbKjfETZFC9n+BMBgLWMwxVGC9jwLHCOb0KouUTseKrs9zAc0J\nW7Hb3cFp875RrhWwHBsB2DRUnQCHy3s9hcIUZjdBBOH4IceNdmlZv2WQuYWM\nNtdAohoQMy2+bU8g8OKUG8kond025CShD4Bv9R0rHx8Fw7vCWcJTrildlrSo\nCVjSq9Zbge8Id4ddQHSDbtgoYSFE9p3gWYyMt/PtWq9wQWEk0mx851rnaGHx\nx71n\r\n=Vo5e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbIGwA7XW628DKYI8uu2SNRZ88txY+b/NnlcZmXHZNywIhAOvyBo+RSz36cHLAnbmjg4KDoQF4hJhGRP4uFbfQZOSy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.2e269285.0_1591752946472_0.6777814483986029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.be138b01.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.39e6f71e2.0","@material/fab":"=7.0.0-canary.39e6f71e2.0","@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-icon":"0.16.0-canary.be138b01.0","@material/ripple":"=7.0.0-canary.39e6f71e2.0","@material/rtl":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KRQnJqTAMNcvXdAMYt7G2EcfbgOaU/TO1c5vtW1BVEDeWu1s7mXSaLbyCm+nKSjeNOufFx+7EkM94JOZGGuJdQ==","shasum":"e3254349b94a5a9ef93a5437f0eb9350484d6494","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdGCRA9TVsSAnZWagAACfYP/1YY+wAareEoEJf9KhLc\nNynuDcRvfNINBleBA2bKLBAA/QL4aYdNCsXb2naA8QOXdc2dbMFYjutAxxud\n3yD9vL4rWVMD3wImUZVkdmbgxgclDrwujDR7pddR1u/s4ESD3ILdpWqWtQ0t\nfLSuMxuc3P0RpnqQhlI3+kLq6b7R8EkLtqnfeFf6tD4JKgYKTmUGLU74D0Kr\ny956D7QrxkpitW2kaARvBFgC3QBy13u4HLVtCh0Ine1FTnigphw0Jfu54rTn\nutFbPOaYMhAJQBopWs11XlN6uOFFb2Df2vYO4liwMbwmsM2vTzDaf0J30crD\nYTBoFD9sqf9Y5xcPZjUzNT5aj8DGLU18YIKGXeCv2DJy50bmcMXjKsD4mKez\nNcN+eEKSdAvIMiMZnce7FFtsgCH6b3qnggVxAOwOx7Ivjor5IBHbtqM7CgUO\nP3OdznEvlcy2e4uOKk2Nr6eX9HudcavPoIt0xfyqJXc+hHnjqubnGVLLTzyr\nwKPVBOIuI+QM2p9huQ5PmY2iDtEfYZCmgIdgz0sQuWHh9t7/JpXztEGquuxj\n1sYAHytPQKCd0ZHXsa05zaFnKtNjAy2dOPp3JJeAVKya9Y9WnKtYkK8uE295\na3ZQhUG5wcob2eU9wJKSIxq7ticaB01r1wj/bNDuNriHHyOlozKZzUzg8Kxe\nqR+R\r\n=XEmt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk44kJmu4bqaW0QlFFqazvDYQg4SDzAMq7pxdI+32sxwIgH7jTECCXkCqel+ifV5WJVy3yuqECbwq6VGi8pETZQD8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.be138b01.0_1591822150120_0.41414823929319233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.04bccf5a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.a6ac8f629.0","@material/fab":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-icon":"0.16.0-canary.04bccf5a.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6CWy+XGyBXm6smgfSbWdc4yi7TOQIvZyXWcaBVKDERD9AS4ypP44+QWYCV3kd9Bqr3pIJX4W/OD/ZpZa2nA+mQ==","shasum":"56a3fc5652b23eb48ed8971a41720c858a1a6613","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Bk5CRA9TVsSAnZWagAAgyEQAIS+iWinbG11PJ5BP+89\n37VAbm9pFA+pdA7Ge00GJYTk0ArY5r5Fign/FK6EDWEGJgtsqkiqFYcAD381\nwvNcogRP5AlU4Xl9jZANujVNIsH/liMJ7xuj5qI9/YwhcR4gg3V490hUVzvC\nLBiMq7Z/X7whW8blRtHRV/Jb3ZMx4lX0ZTKn6hgx73b11aJPfhrndcqdBIDi\ni9buXW4WEONHiNjYsocxz9om3MHmOjeyrInkGTC5PBiEWXQJiW+YVgfy61Wm\nkArG6/w7guJdG2sngy+MCicSLkNWsMoYYU07/pQHBKIhjq3/1ar794lUZtFj\nMED+U4KY6AuOmPgoS2rbCaI5tBjIMXx5FqRxNh54eAV1BodR5BT8mmI5R4+2\nbtc9pcFSpd2+cU8swSaNREJv8yFz6csDxMsnjXgQ7BKtAIDJYxTUgPLpn3wS\nWI7GGg3kC5AtkI7mIS/o69E2GLo8sV9XV33Y8KTQHe94HXHdeunRYURA6ev8\ni/0o3p3S0WiOy3G/AXlYwYzDZ9XmmSdOko8VYChFpiuvqKa+qpzqHF16rdu/\ndsNmvvxYS+RvfQig67pEOm6p0FdSW8uWkwt8nyYNcX9v6PYq8RnMf73JbEYO\nKzCm1oTFVvNLBgWIcFXPDz2rtpVPaWGySpFeY+AAp3sIeGYgNuC90MJ+adXJ\nc7Iy\r\n=6DZm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgOyxQYnHUrTJtoetei2/qyPB8LiR2XoFthCQRCLm9WQIgfJwpTsBu5+VmMdzPxgLOWzeRRd10YMdIQIyLVpGuIZ8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.04bccf5a.0_1592269113096_0.7291786035775407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.b44dea36.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.a6ac8f629.0","@material/fab":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-icon":"0.16.0-canary.b44dea36.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-edJkplrlayPXQHawB2JBO2pOp0raI0ejBWBXRZjUnFsYTmCjNcTvcGbZfNWeIhRVZCzlUZJW+nIl+GtonqLgpg==","shasum":"3012e8a90579a66750eed36297b014ab94033797","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJLCRA9TVsSAnZWagAAuakP/2EJ0eXqRGW3i2e+QU11\n6sUAsOMTEiqHSCTLww1A7iaOfPJxjjOdaFUInPc2cK2PivcAYlHzZevS9pz1\nZGZ83OEru2TG0a42ibv6+j4zlGaMg93EhqbPZ/W2r7n0LeKvvrmSfm4spclS\nZ/o/lIOXfUp1zSLDH6C/obzbuUu9alZPKEyBr/kvcKh5n7WmDktcZxbnyeQH\nC9lw8LNMBGMytsV/blA/uleFaHlgxzzHr6Nw0LZ5MxsvecJ9JT/5/24jsp/2\nx4PtGF/zsvp6B4wBFn7cYMB3KrO2E5foaCwHAWS+isQl4nNA/cqVkhOwkTji\nOe3OMaLVYT4L2Zh/RpL4g/dw1NDmfV2MMaMiHF9ehH2NwDP+rlzjob96ytoF\nXpJYXV05T3SvwXIG8HO+EgQ0tgjTjaxxcxSTE3sW1F/R/2un0rhWR+pQu1xI\ncevIsCihPXJ2cBULsQ7pKpPIWycyvd+H9I8thyvJdT/mcZAHV3hOiRg/xv2T\n/X54TKTmJUZ5lJNnWOqY09L9x5osAQcKPAojv0156M4dmMLlMNIs5VPcgA34\n0jJOmgS0eJcuVVvrvHjUsdGGdZc3Kyb4SJ5F7qOHJHx8VdyJSsQGXdkM37Me\n5KxiIRPbDu6sK5ydqiFcADaEcJCxzzecyztnpVS6wJ9yfUyRZ6TyW1EUNVCx\nGVbr\r\n=sni/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCE7qYL7uNqe9BQLbJ/TytCKVBRuaGomS5ldipc23VUdAIhAMOGmuvQeakoqsOSMeSH1MYXG6UIswjbixrckpqVDvR0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.b44dea36.0_1592341067024_0.48242844769964943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.e2577e87.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.a6ac8f629.0","@material/fab":"=7.0.0-canary.a6ac8f629.0","@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-icon":"0.16.0-canary.e2577e87.0","@material/ripple":"=7.0.0-canary.a6ac8f629.0","@material/rtl":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-M83+YE0pjcyOq4tJKZV8bxA4YWzh143Tmgz2jmpNEfEFsSY3OzkxqmvzwAJMh1sCAOhP77S3Q0DSis4RBihUVA==","shasum":"798a32280363a4ac51bff29001b17a159c9cb287","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTcCRA9TVsSAnZWagAApowP/jMCuKutlIQaH64alsMX\nW/u1tFHK0SSF8mISkkLMsp9Ep10k8UmTBE9NoNiHWlkCRF7ufzqFFcxBnAL2\nosAx1Gqh9xhZ3JJ3o2pL1iyCG5B5RN60R9149c0649+0si/RfH1+ObcavrP7\n5OMEpmrRaX/t/xVwvan/sL0G/4pFIvyrMSKhnsNSa47BCxZN9846YObXguzo\n3C7MXp50X4XqSIeAjsS9Nq9D6z0vGXcmofdUnFlMiH0CF9iFeOv9VMBCtQjJ\nETLfa9qQDAmBSX04jX1MzNwa68j+MrnKH7ZKxQP5rxaT68DJ/JyZJqHtnGIP\nAfnTR9u7DQEoYTQL8Ygf0xLaOBh2VCKruwcAF9lJjz5LG+RkRFOuu79YvyMQ\n/RQl6RK0IMKRZRCaP/uGO/taO4gVsBxBK6g5FmKTq3iSmJtjRRZGU6dsyl+E\nE1tqlvb0UCm3WikQmfEAuyzhHwFabzF8bjLwwU/CxKNkpqwFGkmKsvaBTpgA\n8cVt9YA7j3Klm6+qNZvqrz9jbUYMmsOoKn+wwwW0d9YmcNXM9/SqD2Ob06LQ\nw3ZhuyzPXBWiVLgD4KNpMquPbVhngGZ1G7bUEonlTrpHC196Ocie+mRuZOeB\n+RNPrHwCNLfhsh7aXe5enZ0P7MyHFImlDZdtJ8OcRwZwQa9eSYcQfwl3THu7\nJ9ea\r\n=UDhP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDyUXsKLa8m54QbxYANHByycv+C4r/VpPlJV8SddniaEAiBmBPctCMEuvxl4Shxg9j0ICkD3VpygH7VgtPrdB38iJA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.e2577e87.0_1592341724026_0.9745621466806722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.58b73343.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.3aa33998e.0","@material/fab":"=7.0.0-canary.3aa33998e.0","@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-icon":"0.16.0-canary.58b73343.0","@material/ripple":"=7.0.0-canary.3aa33998e.0","@material/rtl":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-i39rfK04MNISqJNJImGi6CuhUfbAP1JaGoIqW+3o95v4RGOX/w9fvL6pugySuATMFj3aqMeHrs8/cES7XeR9tA==","shasum":"08e61c5a871a5135633b982227f69d7dd7d14c9f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThhCRA9TVsSAnZWagAAUuUQAJz4qzTtgb49TPyUWU42\nQ/3JN70n0W2aIcEwba3XbGa1cdRSuXuB60YFsnqH4xkOBU+CKhY7iLf1/sef\n/bOG9Pesl7KQHh+lru84DsuYrZ/Bxt4EIXSR3jIuMtyYDKscBVDDg2UNR28c\n9dLHpjObmwEsXGF0B51HhCryAGZf3rBGeyJTlBIjL0yf11YWpV9enpobRhTd\npKxPipEnYqO5UjqUo1tFiH38USMBoPdBMUBMvLCOBObWyLpQXGmeyzyDZIJr\n5uYKU7z3sIbJPt8bz7e+XOyn9DLWxmBpW8zt/HfQHe2+f1uJ3eI7CEC1S4uE\nfb7LRou+vK0uHjum7jovapXyBh+GE86+sBOMUanpLmgOXtYVQM/40XfiHWRf\ntkuHjBhdXE+uWZGjMlippBswn8bA+oud+8KCxmf3Z2w46zJyBm3axpxXXr1H\nk+HZ1qXlysPpZ2rSoDIxS/4fFFN/QdcDOXCQufPO/XNo2L8ng12AvH3GVPSz\ncCJ40DIMGKMOaPGrkP+Zg4uflL5Am5K/iWZB8qViD3MjwlprpNWEBrYClrI+\nkMMYuLbxHCaTc194cMIVYiEFiwy1UZXUzzQcbcK3etPdTJDkXTRacXLuU4JP\n/+TM4qulwt8uMTZXrAFyw2QJbbihHcWkg/aWVmQMAemUo1OSTM9Mx7Vo4CyO\nKAmu\r\n=UlLg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNfA2biHEgJeO85OA7bwJ+CxCJbJQTam1JOCbFcb3kzAIge+HTZrJ+CXIy48APDnleqUYTqThBUiJRJGI0Qx4drOk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.58b73343.0_1592342625356_0.8691646227804641"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.f155c058.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.f2a488e95.0","@material/fab":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-icon":"0.16.0-canary.f155c058.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aFPZlp0O+T4ppx0lPpRIaUsX8bro0i0ddRXpyHWU1gxl5pMq7StfYPQQdSJV7CUKKmefD04OGL3o0z8Q1cxQKg==","shasum":"6c96d0b0bd3d1e3756eeada7388b868ac53fb487","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6616CRA9TVsSAnZWagAAl4QP/iQuVdLExnHDq9vv4ESY\nGWS2Vsz+bw/fkG02uzS4wHS9JKTn1DFeL+NoXsEPCXYTCsKB9jHNztarD5ug\nFEnEnlAfRTfbqQJY0zaLeVivftZVNMt8afOucOXZ5x/5uzHNqYvBcXUaCmLF\nIH7hF/QCbhn37+EWBkL7QMS4qbkQFye6/hL2ktsl0xPIf9twXNpilY4zDBlT\nDf1xydArFI0Mrxs3Wjwhxj0aPM19NZ33z4c1RdF0Y6doeKwzq7Qgza13XH3z\ndrfGyOUs9tFI6ZNkvUKOItYaIy56gvk9VFlg0JPi1Rqn+P1/VeDBVRLcOX99\nGFt3/PD7CRAw1Vz2yYqdEl2fMOx9tHHXzA31mbCXEV+Or52LKFl/TyYPqry4\nJy1duD3p16VVabrAwabiXi5ifSJ6F2Nc/LSG+42Ff1hI2HCrtCnz3PpgXGJs\njhTOpSfWLpQmQmGDdo/Bx6p5iVL5DRv5x7MMjxFFyOOb0fnT6G/nTloO3m6v\nJ5DzSWDfa6QV6VuXkLgcmIMSd2gAupp/ruPOMvrTEDpesjsMl5TX1XVDsj5+\nzZqdKczNqggnFeIjVhjqCCia85S6RlEX5yabi/wPnbKkNrCT35GtuQr2ghME\n10+OggOFA0ENKDsocCR2FLrKfckYdWr9KiT1taT0grBIoeRpsrN+zfhV53sj\nBFDm\r\n=2yMx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZpB2WOz1YDzugcIcbUYCGAhvcB51RsKNBu3HK1dKLdwIhAK6qPboZIZUo4K1RbudpBLgpIsXyWsz3v7XvZgqSDkIq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.f155c058.0_1592503674353_0.9365150110745881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.309779d2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.f2a488e95.0","@material/fab":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-icon":"0.16.0-canary.309779d2.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ny+Va5ZOgitTBwFD7V53ljpx+WVpB0966FJa9+PX9ZhzIpKJlCd/hW3imS1ytkuL1kujbbxFTh1MWwMS9RHL+Q==","shasum":"3195e3405f74b3f42c2c6427684f14f39255053b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+vCRA9TVsSAnZWagAA1joP/iAWR01F0F5PBHOKqIj+\nRiBH5LKrVnoaPJCkl5vHZGOT4yVfN3nCMH8JA61JXK2RM21aAox1S7AA5LNn\nEXw1ZcEOTPQFKNrwDpRHexKuD0jTVAno9aZoExrNUdHUzxYS27J1VvX7DaOL\nVJjASOJmkaKwHdyxhRjgWcUGI0ATF0VNLWgQSW/hlaiBrZnsR1MAEc0TuPkT\nNHZ3hkqn6bczJE7JyidQT+t1DE94ziLTVQ54UQqF0aM1bT7Roj3IIj0cMjEc\nrneTyq8KMujj2F/EeHYnABgK+QFMGr+e+xTvzogLqCyXG1g58bxiV1Fi7azg\n9up+gP+e1EpIH9hath9rSfkHlZpALvRM80Os2y0Ly1Ud8hlf2UicjcedrHjj\nllWoDdVixnPebgsennRJH5x7JETlhjy813oaDqtMkWEz8OKYbbSAEJTxmE5i\nZEXIeH5CVctGLZSu1pP+HMApmCB0diCVv82dg1zbP574oIuOaofkL4LoKuIW\nM8tpkvXlI6XZRWjO8dFCu4HmdX/SnEmVur8l0Cdacr8lfAuW2FTvInq8ByYC\nxk8R+iZNnIEjrpUJVyyMmpNLnHaU70GIEvOiNA85C5DaLtSoyt6r38kMitPK\nkl7qsc/GRYdynJOaQIZt16ZYRBPfcFLKyOZdFhXa4db6cl2vzPd+bsCNkcOM\n2SEE\r\n=1GWn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcCzex2a1yZ6x0GF7KKqOsKi2dtAnjrWlykcase4k9SwIgJnt1TB0pjEP3LPxYxQhswkEFBXsaZBE0zOZlXI+NaQQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.309779d2.0_1592524719189_0.05617277352798378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.e7649968.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.f2a488e95.0","@material/fab":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-icon":"0.16.0-canary.e7649968.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GnDUilwDwBZxWHJ/iFhaqo+bCgUPucA0fFR2/IaVezLWj8wgCkA+vP1WlE67DhnSiDRSuaR04JGohYd8crUtYA==","shasum":"e58c6896e65764317f1c0b90af628361172e2436","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDgCRA9TVsSAnZWagAAN+kP+QA3uyO+LYV1wS8fiIyi\nMKj4B22sG47CYkmEJW8aDlShXslgilpYD4FlqXiBIq2MahwJ0vOYJo+pq0NL\nymkejf7mfRt1SyfFk9/NT4JeLnWwT7SagpfXlBh6TJvya4Ac7TFCdyoL3X0X\nKt6IR25FUU4WNocow1Jx+t7fMbVf3Xhb++kM32POH+kH7ANVzs7p4wzf9H0k\n3B8BTMjR/6en4hzpRp074d2F4efx/bZ5aWBcdoQzIzT/rnIknujHlq1osOkX\nLgjuT2nV+HoaYMr2LkmmhX+CuOJFAOa3HAu8/MXvOVftrYLEQD5TGJCwQsZh\n7G9TXKYAOnHSp92cNYWDCDu8p3fqts34QKW8xhP50a26Po7Bf+hEtD3gIcZl\nUSArGHaiRftDoXICueLAbdwEE6Fheg8mOqzjyF3g2dfghIWYm+2ui4okfEXW\nA0aHZ9u6DgoLPuQWW75fGAeErb4oqLWHBokTPZMKT0qBIt3vykH36vYldBj7\nL3AeFTP5fHn9lcC60Aoc4N593r21phUAe0wVXCCc+qOTLLvEl5aDeHgMpEQo\nI17frXixMn7D/kGLpmD1ak1ih2nsnomMrhliqYl4Z1jdkTN1uWPQULMn8ptl\nvIhdQwa6cWejw1mXJqFactup0L6EinLjGWmfcbqNR+yrP3+2MBYVXKKnjqyO\nxDPy\r\n=s4xk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/p5zMJ/QKtaSpRbCWgJZpxp0LiqaIgpQS5qOUuPVIFQIgZVBR3Ap9keGXiYPSwn9ihVnVvOFyxum6GS+FGgkY4C8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.e7649968.0_1592602848283_0.9178747340554254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.8e21c78b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.f2a488e95.0","@material/fab":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-icon":"0.16.0-canary.8e21c78b.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-oVH2fERdOuLQ7cf3RyHXnSPQ5ZMJy6B1y8E/HN23rHfHo8aJ9I7XntdoOgau5ORtPsfBeI/7B4BgST9fIWxU6g==","shasum":"826a8bb0a723ad18a4ef12efa3a579758d556175","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8In7CRA9TVsSAnZWagAA+Y0QAIW7n9SIsYK4U01DL+zZ\nAhwE0m9xtHcmPWXdy2hm62h8+FrEgQOFLckOR8iblG5MCE2Qh1Uh88YMyk1+\nGqb6+zpW5kTSmAiW2WuduPhT9qNNEcOOM7bsMaQxJUmmYYGJffs6Ax7IRtXb\ns25ySnHChBa9TW0JOn8kXR0fSBvaksxz9gv5xFAecXj4lFeWuJUur38Q2yix\nMrO/N/6jSh8ZoawfoaPJroayNsQW4GVnNCXK9eQ7wkTKX+4sSwvKt4hXHsPR\nNM5xE8zWuVSFDIfoUPRjF7Hy+p9IoMMbnD6LSkA1qD/+pkPA8gtdX5DIcXwW\nYepXEy6LhXaGKO65yVdvjZLqJhaSI4XN5YUsPHnVBlz+NPk9PfhkI6XiP/SH\nPelzZfhfFfpuc3oPzg7ZEHsAiRBOYbWngm/Gl4mEZ9Lr/SGl4lWuMz/0zK/O\nbqCvcts/yOTxeEhLZqYkupZLqrkvP1E1p79L8bfnPahbjkFKEP+yY8eLuval\n1NwkQxMCSjjrzBet4YpI3V0fimnkpsApiMrEnuonDjXpmRT1zHdbp876iQ64\nvt7b5n5KYuiJpJ3MEqadmEa61w2S2g9M/AF5cpqpwbVuE5uiMsmUEoIoLz4Z\n4EjSnbxIlmkWgwRxcyZMmXjWDOL9A8ZYeLGkiYmM2dQKtqkMPhQ/MX0E3T06\nSz/s\r\n=Vhvt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcQBYLZsc2Dqv/IHf67cjdco2Ed42UjtKKawtsbJEYuwIgW5MQC97Mj6LocqNKs/yiNWoI9v5djFyLU6HR4SZbUY4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.8e21c78b.0_1592822267156_0.26055595895260963"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.6db76faf.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.f2a488e95.0","@material/fab":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-icon":"0.16.0-canary.6db76faf.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4pqQxixH7zg2CIYgFBsBR7zkrZws/TlAC0YnsI0F53sAp1KdOD/8IGviSStWoXUJ2a4LRmif8CKIaVKICw20zA==","shasum":"93062b23e5ab2891d068ebd1ba6fbde2764f9ac3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7NCRA9TVsSAnZWagAAmLYP/3SVNNk6NlveX42oSBcq\nmeI3LbTJweXsmBRWSidf/MNGj/H1t5K7DjTDcpBqcR5exkETchX+U2IyQgYL\ntAgUkvBFupEdqmo/2pIRvUpJhX04j/pEaUjB7Ww1xPBe9eSbhPzFcjwWvh2n\n9vkKgPDt1W1FA2k5HDPPPEbqO3YTO0wUvurEwvLXiod1GSPd6XhVhZZg6+Fp\nrJLJnW6/azuxmlajZXHW935L95OPhANOVtpEIB0UVqcirpGCCEbATzO6I9Gi\nfXk37s4g7K9Q3tGHa9BoAWnyySO2Io8f81VHAMM6LO/DJObxGdZCQvO0YT8/\njGZGrDlIdKdgJFfJeby7E5dep3Hcd3KdiMgSMgOp6kS2uUf9l+zJfCbJIA38\ntqy8KUqkorMhiSjQikpaIQjIKhljixy+/fTWA7QwXg6/xWO3QQ2rVemu9UfT\n4iFQ1KkQOUyxjmyNmZzG4cjwBbPCCJMC4hs2g2wWN+x9ozTiCPQDEXB3TwXx\nb4cwqRQzYWDQCNINylBscjXE+VgF6U0h0nk4mYoAu4m2rU38PNp/JQRGPf7Y\np/WnDCXzdbmiisz1JE9metJ3cRig68f3WrCOrO4OQHUn1gRS0YAzDbKr6ErK\nd++EpFvGTRWFcyaTstc42mo+hTB2TWF7Oo/8j67CiO0s198dm0QqDJ8kfOLi\nO7Nf\r\n=KptZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCktPFsrTU0vXGHdQxbukmk5Rw9E69JLJBIFvsTQarcSQIhAJBysQIzRhlLSBg2C73NwuNxzb0t0KaIT6OEQkdAqHTS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.6db76faf.0_1592860364835_0.8961827407491083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.c4dd9684.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=7.0.0-canary.f2a488e95.0","@material/fab":"=7.0.0-canary.f2a488e95.0","@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-icon":"0.16.0-canary.c4dd9684.0","@material/ripple":"=7.0.0-canary.f2a488e95.0","@material/rtl":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-s8yMbNBzKEW+Wuw0TVNxCDZXJj7ystx3KsIjiZTihqDS5L3WTk5t5gTHVzIQMXjLKpvTcrQI9n9JzHiR44wjZw==","shasum":"63657275fb3a568adfab5e208b1b5a4da04b6469","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hx3CRA9TVsSAnZWagAAcosP/17803Gxo34iSo5NxYE4\n5yoXn48z6qD6fcbfVWWDmT2YSTqfF8CELj6hbccWXgtoMpJFrdCdLkYfKocy\niKLQyaiA/zxkBtz5803zgcimEe092MYKVe1GDi1vRNgHsktGjnZYS9AgdzrW\n00uJ9wQ1ortZ0+cWINtCkTPnxsroxiOu0T1/T22m8FRRxL8jXL4VcdICADqw\nDL5IQeO16CPzVxop+LWuTUFr8flX2FtaaW9s3dSSx5XZ6WEMv6cwuflEzNw1\nl2LT/gqMM/IrGc+r2MVpNKU+Hq7da6kDtzGrdIHnOBFYdnnI6awybuzdNyMD\nJn2a7RhXAZGR/OXV2vLmB3x4hkuW8gyW4F5AlgvnPok3UsOTfWDW12KJ9kfX\nvn86p1ghL9XUr7Yy56ZtUjW3wYPGrDH8jYwlk3s8OG1H9tUQr9Ct4/23H+A1\nfnzgMupAAJpJAtWRYRmnyazx1oAGbUSL+Kf0LYAm3ZfgK7CFmYXeeHywhLcG\nQjK8kyF92qk5njwZuIPJSVELM6vemWti70mx9jPqgECWqhR5Kp7k4YWNp+VQ\nR5rEvJ8s+NEpWXyWt6ni3OOj3t6wXbB1EnxtvSVwrtAREEhcbt2GclwydXGO\nOidyz0qzJBFjLYlwX04NpA31Yu5oDfaCiDZAD+gwGedUl8E12QgNq7TVPjY6\nxOko\r\n=yit6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGm2myXUybbxOdC8Pvb6MwN5eL3mTRtGoWWOs17rjdPgIhAICjYtoAonYx3dICUDNpSE3ihRIwts0qV594giWE8A81"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.c4dd9684.0_1592925302892_0.27159472296626674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.b3e53981.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.15e81fe98.0","@material/fab":"=8.0.0-canary.15e81fe98.0","@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-icon":"0.16.0-canary.b3e53981.0","@material/ripple":"=8.0.0-canary.15e81fe98.0","@material/rtl":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tHN8yd9vxkKD5Bd/W2/b7WKL6XUJNViM/L9zr4b8Hib00x+r3mDuYuRQKJf48rOC3YBxFSNix/7hxxvu0NrtcQ==","shasum":"f88c305e63849653ca98a8661121bbbd35876a79","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCxCRA9TVsSAnZWagAAGRgP/iwfMo/BqFu5rq+A2S3c\nvokJm+0V/Ujdo1IDC2d9nx/qb2hSlAQpUBfosYGcfZaLnYoPoyv/aVtBANVh\nMVUkFmNyRIHVm7z+63g5UNSPLScZyXZ+8Ptls8hBfNiZ5jjsiCcUgAUBHbzc\nu1gM+EOESEjaqYIDj0Ebc+tMHp8rO4AoFFnJ0dJoylvo3mCCQYKzvMiIk7Vf\n7BUwwB2TyYEhfLFTU2hCkSZORaeXhdZEiao9kjmhugMiXvCV5DQacyMY+i5E\n3CaqmtfZUzbry8YoTyJgB9laG3QMzQrafEMs+ksx5sLIwCSr8VsvrbYnBxE9\niFHyCPFT9xKIPA7VbUXX3sHVGv5N7fvlfMhlgTMrElroV7sWI9/yeLvRVfvR\nyQZF6765vbwok4f8IGVSskOX/zeWKdJIYNJw57m5Du5sItfywFlh41Z3CCj1\nqYqhtabyQeL/OgqW/f29O/o7JRT5ukj8S9WJsXqgx4HN4vMDYckJLHwSexgp\nj+LC8+USIGKzRg4S+buApXF+/pZ9t93uFzWTrTQ73Fm4VHfLlLG1OBk4vMl7\nRhvvRl2Yg/FlUa3yAJPIzahWgHldf1yEhDo8CJLywejnVHD6k/IKqTJLUldz\ncjoLaPRkAlIR971+CRIl7eIl9hbQP37LBwBW79gWSqzhMBIWKrTY1cPSmt+Z\nrUZ9\r\n=1HJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjSZAvXf8zEvXl5eBVA4KjTAuW8WeIslGArmBSJA3ytwIhANlSmcm2VRS74H5WNGqcD2sOcE/nLVfuWIY8Zi3KULva"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.b3e53981.0_1592959153261_0.5574626586358267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.b9468f77.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.599b8c319.0","@material/fab":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-icon":"0.16.0-canary.b9468f77.0","@material/ripple":"=8.0.0-canary.599b8c319.0","@material/rtl":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LtfFVqLchIRf6tCBh5K1vGxloHTuMo+51FW3b2o4hOpAt67lN4oCO/dEF/i1juUQzvJluZruJ+5hNLefDjoAiQ==","shasum":"56288c31076bd47d7824dd51b635d9b38774bfaa","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uRCRA9TVsSAnZWagAAe7sP/jMmudlDERRrUWukaIQV\nsgsA//smT9W/UOQwoC1gookYGIGqbWDqStyrdcePbzc1E/8j1bAhu8qMLyaF\n42nslT5pDFqV9Cxmdmy9UMgUojbZQOA5t4r1u+7SXtQyoCE92EYeV0opfKRB\nQiVlkUCQ9wxRqKSbDi/0AzEZrA11L80uss7hWaEFQjInBb1sxtpWcsJIt3Rg\nzMip4EkGjrralJznvtFz2pI54+P6MDCB7Sd6HYl6FDBBUTRn02uoa5nuPaKl\n1ejJBbBY8bcWH8LWB1GXl+wBVBfYbXdYmrZoHv/xO0JoCx9WPi5lcd2ps4n8\neYRK0IkerE6w9LlqBXn0IOrXdR7Cd1D2bOEHyr+ycMNQSfQV0MzCpNOTDw00\nvH8VXCQ8tq4gjm9naZM9LEFqyC3xJqyMULHOLoz9AUIl0kMKLtPCDG+740je\n68afBBAT6XeVZXxN2C7YQ7YuoPrnFvMndkqLfI0DAvDT4hx1Ui5D6xYPFUiA\nb8D1z+hD74E6UmEyx7fWBcG/ogZmMRQbehV939SFvhyLOgVCOaRfn7eSa3HB\njd675kFUU76jeLmDQL80zUW/Zr+fhT8k5k8w6w3wkagpWNIcfIdPN54qdKwd\nZBQTW5o79GrhYYhekaW0fi527oS2w7+kexopzLuQ6L0e0GlFAo+SemGcJ3XD\nXYoX\r\n=M8N/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq06XFTRlydjaO3fBQ59okawuW603rO97prBtofMuf/wIgaFzI7N47PDVZBrdLXV/J8PlAZpPUXP9zRq7dxlw6zN4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.b9468f77.0_1593035665450_0.5055445595949137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.eb790e49.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.599b8c319.0","@material/fab":"=8.0.0-canary.599b8c319.0","@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-icon":"0.16.0-canary.eb790e49.0","@material/ripple":"=8.0.0-canary.599b8c319.0","@material/rtl":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-k8HRfLFZf3UBzIISW9y8zmTuVmJxskGn94uhCCXynqeZNiXEyZp3bwM7JY2ijJ4nLzwdsJQqFSFDWY3lREneTw==","shasum":"067fc8e0fd458edb23409e639d24aeba35a8eae2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTBCRA9TVsSAnZWagAARcsP/RQZ+uej6IpSqsFehg24\n65e+xDNmxkArNlLb+imaxoRRmryBAfXDC6GZDeYmO6qCycw3+iF7myA/fr3y\nSTD4+DV9fqJLcFTQkp02yiyZFURczEUvX/faEn+wi/rR02SkJfobqnd2hXmi\nZOH4C/+3FRK3Tn5ZE6bLm6CWKB05g7nyCTR7jU0bjlQRJ8nN3dX62iN+kyUa\ngbr89f8shxudl/F9Nhwmi58hy3v/qbVDW2jY4FnsZ84tRURffBioUyE/ewCN\nMPNeXYmRs9f3mGowDy7k0CSZs8NGpDJxC0bIHwxrqN/SL/bpMIIDJck7iy1d\nt99q2Av7iiWIjlLvp481rrTpST8yG1R6vroDv7+jJLSyCE7oVmeoycbV7L+D\nteoMmBrXKJPgca6QtE79n2z/u+s8+0ICEs7co7iiXabCLFB7sTc4pR/iL0zn\nzO8FPnreT8Y9TMiQc0FzqbL/x55pNWS/m6x3mCeHP/7YQYPozoenPyvvvErH\n756FHZ3AJFEy0lOcm6PfQ4fZFfdjBojq10q6H2qFOscd2OqHQVqMnMHYo6vl\nPzNiQ0ol/fLk9FK6i11XXBsFn/YvjatvESuZ/8nCg4t+8t6eSDAGmB9qqaoA\nnjR4i+SSUoMPnUqWuEwAcDSx76GhTjK0Eys+hgFxHBUeHWLW2M3gxdyo4dV9\nuuck\r\n=fSho\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9osqFK4jDkhV7THjXmPdfSBeYuBztD0vc7TSnSt+xfAiAr0UrniNGfRm5m/LySBN4XnWr7Zi3XPGROG9KVHCTcGg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.eb790e49.0_1593119937398_0.7267211546605961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.9aa1a5c5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.38197b443.0","@material/fab":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-icon":"0.16.0-canary.9aa1a5c5.0","@material/ripple":"=8.0.0-canary.38197b443.0","@material/rtl":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zMEgboZGWNEGFAyjFqNVtlQp06z9picb9e2NxzDEliaMvPX19qLR0ubvwMUV2Oqe+T7F4UKJXi+lfvrJF/Yf0Q==","shasum":"f9c0faabcbd00f59169cc27f93b509af579b29a2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irOCRA9TVsSAnZWagAAkbgP/1K/AZSSQkwwAITaT2i5\n/6rr2lauHkTc1zaNw1WSju2LIyzUv4lFHzvbz4Di80s71c8xqb0rrNnB1J+m\naBwVuREkFFf5+hOYgNzrHr1hPOAE3jRjKnNbksIJk6/G/WBiP/MlJ0UqQ+pF\nTIeoyPT+zD2vJGutKGYlcD7rHDIZNITa3+L2L2a2W+YYbm5G8WZWP3tEZ1fP\njlilHl1AUI11eNS1tGGAuxHGbDbHeD7598HjDFz4asYGOHQ4ieoWYdh8pxK4\n7Ez+mvCTusf1g9Gwa1M6nx/+iErkQz82dL8wgB8vF+m3UpDltakP5Syu2Jts\noJUleEDMYXJ98odK0hWEfiE4aRyivUzrrqybaG1Py/AJ6RvreKQEKIXF0L61\n/ztMfxTlv6mDxJtFYs5gWunIej0giZzCZqX+P6e1rBYxtmEK29KOVljrm68b\nSbgA0zI6LMgyxGiV90Lvzr1BZt46DYSzC5gW6crvME+15VYXE9dx0gZE6APR\n9uEYwT9m69dYXm07yT06LAU2JbPLolnAblaczXz0YTgXFP0gBwmJtoDTxTlF\nvMlpeleDp2HnYM+HbMkAVa3b+fnSscpx73nXedT+ahQaAMfpXuyay6lwFYWZ\nm8UAaxl7UovLSs8Ckg/8aPTK7vamfrrzmZNTuquG4+AGQ3BC4cmp2/00pkye\nwaxS\r\n=nyTr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiJPgrDLsp6Ae2/bnsAdICVGNiFPR69FTYGYKeneUr9wIhAPjKkBDMdzISwAr9h3G4gO+NSGNDRxfUXxfDxxfSqoKf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.9aa1a5c5.0_1593191117509_0.513101143908838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.d36e9861.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.38197b443.0","@material/fab":"=8.0.0-canary.38197b443.0","@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-icon":"0.16.0-canary.d36e9861.0","@material/ripple":"=8.0.0-canary.38197b443.0","@material/rtl":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KHJI1gcdLnWZbxeWb+22DiNWdgTeUAmznauri64Ih5EqY3/7oIsbiOg6ka+RP+Tgec6fQJ074XZQ3VToSXBFXA==","shasum":"2498162e1be03cb9ece17adbb0fa113abac21162","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIYCRA9TVsSAnZWagAApswQAIi/qiS5uBZssvEoCvuu\nSNMArJ2BrOGDHYlU3XPbGnIc5BjOOx2z8DDQ8jK2MF8uURskYZWiv2Wn9bht\nr262Uc61rQhteR7tnF19ZCi+vhThK7bYhJTt3JsoB1LVPUu8LxzCZL3SY7tl\nbYa9WJR86I3/30AKfEPCzCfywRmoF0panEG8WqcyCEk1jgU5ZeUBGhvmb6JY\nObN4vH4Nj88vLwvgGRK6hyWxYLtOryUv+WC3UB/CojNPVu/9oQhTJWfsonzx\nFevCOPuFwrbp9bgc0J4Tcc0P5uqL+mMwVzkJnsuAQ/t2CfEE5CblxP8OUfmL\nJruZuiVMGOURHDuSXTXt1I0sAPWd0zxQY/F+SDTUIstqSO6RTpSup+OS7Tqh\npH1NG5hHe1GZA0T3sjTnJ2KYbE0dBd/FNtvwL+JdZh96mIkTwfW9VqUVZKcR\nRijYan8zNEScFAjWtynrAQ8wX2e1yOMlaJJl0QUpabaZrddQSjYLUIhef+jZ\nbLtj9pbU7xGVWoyd8TM8bGCxLdq1hGXITQyEnkdAqgE/Fh/UGuTI7n2FvWPn\n5+q1op12M+snEb9Gjgsb3WnK8dyA9GuKXYKdedeOYaAObLvU0gcUUb87CaFx\n/plucxGP/g3TUlhVkgs9pEgkJiZ/zcymCMCar6IuAqvkB0uE3Vg/OHTj00wz\nhgfE\r\n=BiFY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1wjg5wU7Wnsup7qhRTJa5hsuC9ylx6Sf98alP9GJvOAiEAoqmkHWrqWELPqNcLBFLewQANQY0ZM61RuQZfm7NJ5QM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.d36e9861.0_1593192984193_0.9739319714833075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.155c2f85.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.df7154fb3.0","@material/fab":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-icon":"0.16.0-canary.155c2f85.0","@material/ripple":"=8.0.0-canary.df7154fb3.0","@material/rtl":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fClrURsHX0uvqYHRFZEoJMwoCJyMFn0K8YvMUrwLUZWs362SVYEKmAwV1TZ9d14un53hVO17i515xSaa0pQBcA==","shasum":"6822c3a2bbdf6bf72fe4396579380a24b7fbb02a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oTrCRA9TVsSAnZWagAAjssP/iqJgBwvNQTx764R1g2r\nGEaEz31J/viIB91u5sOoZnuLWuxqSlaV/x9hjFwc1yOhdaoJNJmvG3Sx+drR\nQtJA4Fgk5ME5403Dh5BeeGItF0k0wJS/2aShWsvKIWblHLzceWzCfKOWKzy0\n3u4csK6acmAP4JW1TjHJeUqFYniEkvr00swNYixRWeQqjKGoPAQFTbT98Di7\naaYbSi/2F8ztLMHqYhyw5rNbH7r53VqNOK8iuxMdYTP0tq2BkwNhRTfiY5J6\nVSHSRXoXghZzqTZuGg5scH8NaSzgbBO29i1q3phs9WAoL00TPxEwMroJtESL\npg4dguTQA3G0Fzi6kyZGeVix/HBZTHijG/yiJGkkpGW3X/3N/YyDIKOvhcX4\nQO6cXxzXHjvqxFp2Q6Z2FFDYlcyCA/F+3h7aiUmzn9QZjS8NbD93wxEaNS/r\nVSe9p8Jfa7GD2RZ2jkLMB1p8fXdz/BGy+AJLsMJ+zObLfQCfHnXKsSopVYEI\n7YWXsuiPv9ytVC4F6f+jEjhJvtpQgbUu7e/gW4Qr3qglu3pA8z88YQjmwHgF\nKGqCNkoO4NTHbCQWNbbB5hQbEqajP5cTTXdLeD5Ba63Jjueu2H4IO/uAy2jr\nU8WJO63nS8zlPpg/6lAyWZtG2UZnkY038dUmj+KMV4GSREq3+0kY8QnJXNPV\nGBGH\r\n=Y+mL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAH09mSVLNMnbfQWyAHB8xOPyd2qkrqc3+NIHYzMl+SQIgJ3iNILYYQXQM4b4P0eAQPA8YKJj4Bk5KM0LCCaQl30M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.155c2f85.0_1593214186880_0.875210474124078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.340c9c40.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.df7154fb3.0","@material/fab":"=8.0.0-canary.df7154fb3.0","@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-icon":"0.16.0-canary.340c9c40.0","@material/ripple":"=8.0.0-canary.df7154fb3.0","@material/rtl":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FlBF/1mOMIc8fNrPKRb3c042G4itB4nAv7c+C6C9B8NZMgSRJuHKgGUKb90PUMfRdB2mM7AgM6SSlC9ea86rSg==","shasum":"3168570b77d914c51ce971411267cc64f9f358a0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obrCRA9TVsSAnZWagAAaHUP/28zVt3tLQg2wH3oFHsx\nIBapl/cvsUKRmbwnEb42k8KwAZpLNXFkItgrGjBnThTpEnN985RoXbzfYVFI\nGV7UHYXPsfPWki9xbV5rkirKrlqVW+0PgEV3htnUhNPIjNuGDsVYr7L8/n76\n+HqnbOcH9uRjSH2lbjkmfM69fQ0hbe8Zz/FvFVPMK4ThZ7EpCN3EU7tmzc8o\nUwPfb8K3+NDa11YPu3X6KckCodIBG5ImfMEi4VsiqmKuM0ZOtMverUVOO833\nAlkBe+3aGKN5b+74aZHeP62ly6Ge56FWpXVna8cCjNfiW6eJrG7+dsHXrQes\nGjdY56n1D937BVpY8qDXU8gbtPZ9qHir328KMmnqPTkEx7YSJYDkaIENMJk1\nwNQ2h0q+CylvAdd3YpAE5pSwGiTppXh9/9KTyww1i3WqHlydQZhIBJ72nmTB\nDavaBymmhOEr96DPcBUAAIdvN1WCtjetKUsrbiP58OH/g9cTx4U+0NKXs8Qn\nOj8HVcLoqNAu7N1V/d8Cuxruhh8tyuOsxt3ocNDYK8Z6/hqEZYabbMkD6l+V\nvORUsNz0MxsiOC96s3HYg6ypkdBLycs7AAlFy5dbfulQIAajnYKM13sQHvOd\nwKHskYcpz+a0NrwKMs58CXSvsf1vDCFIZlWAe4K4hqVdGn27rg8YnTbQ76fN\n+PqI\r\n=FZIx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICtd0wQJwsWuRfOmyxy+eE6+ex0OWs0w+bLN/Aej1hwCAiEArvirBoRAE6cu2EQbx4gYll6ffcEHAmAKLyDk0Q135Gw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.340c9c40.0_1593214699097_0.44786409272316874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-fab","version":"0.16.0-canary.a3384d2d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.c678a9d34.0","@material/fab":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-icon":"0.16.0-canary.a3384d2d.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GgS6DLfVyEn8LOnUwaZwntttIIvmgms8GFY+pqAJnGeIgAedoDyoNsmDGHAXsmiDCM6QiepAwIfrRLSMmaDkGg==","shasum":"fb47e9c8b82de91cf900775ec0c8aaee202b8ba7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6ftCRA9TVsSAnZWagAAGkMP/iS/mWNasw6wu86o98j5\n7PxlykPdlzeB/huvDDgrAp7HEQAbYcFzmCWZ5gsldRugKyWzkcFeAU7w+d6b\nRvJWK33rd232Jjwksam8fCxKtcsVvGXFGOgBTU1+t1vFaagb0SYvqqpqvBtX\nDpRK8fAG78evALjR9pyUhKJ6roMhsInCs/bLyyOO/+PQuEsKKw3wmHn5R/e/\n0Oquu6yACOEAd1Mo1tPDqqYn0NicgH75XuAtDHm1obYSs5pjiDylg+UBT9uW\ndGPQbkybeEgbluyNSOiHzYqv0OCTKx5k5ArsfYnopUyt+I+LVgklOWaglLY/\nj5Ar9LqfpT24DFbBpP1GIDr0gHYSd8DahbhAo9P86joE+ML5sQ9BhIAMHPaJ\nB1oIB3IGs15E5nxIH0muXga1oPf5US7AXU2MfU7HzXok7C8RPKRUVx7LqUcw\npQpczwSOCpJqWNFfJLMuw85dwF+LFDalw5ldG5EOOq3dLVwpsp+OCaS16Hbi\nFz/fm+2txZbAkb2ZynPRUmJj4Glx23V5hBpu09/gOZNcP43iZwAhVqezM/j4\n3oIC17z2DsbudRmc7OCyttEGByzeHdWSbzQmE0yZtoQz58ZO2Omfa3Ux6T/u\nzF9vsxb7jphub7xpGpLvqLnT9SieIX4iwwycCgIeX9FYqTpD38HDFTYGSPKI\nn9YS\r\n=R1hK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPcTmv7fHM8YLjM5CNncArmRk8RhGSR14SuKHNvQ4PgwIhAOFziF/Ud4cvB3ibGZm0qY+Uu/94bLwk+XAEaOdTvfv6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.0-canary.a3384d2d.0_1593550829198_0.16766779969744827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-fab","version":"0.17.0-canary.6d056c96.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.c678a9d34.0","@material/fab":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-icon":"0.17.0-canary.6d056c96.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JuMVRmfF/98bA9perTbv+6bx5dQFPbB76onvLBm4w/i+WW7al+QoiDdj0h4FaMREtpBQsl5bFZovk3jT+EZ3IQ==","shasum":"9b9d32f9a05e2bd1e54075a39e349c144aabc1ad","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6ofCRA9TVsSAnZWagAAKHEP/iVHTRL0klykeCO7YzTg\n27gtsjAB7bER+dLTUOtcpaDCjxCtzVUw2YOswBl5xRAj7Ke2A3b4N3YJ/GUC\nA1e/gJj+L9lg7Wcs/FXAM94WN5EToJXkRRedMY6riNctHnlzDxMorc5rADtZ\ntgm4M0zVpL/vwEiXCoCxqjJrUIU6/5nwwg8Ydi6+3kb+jKIgzuoLizhO8rnh\nzW/sRHT4J5uNuvTOVFxkDHX4arJ7gAbDdcLeBfImyxbrTXwenR3Z6Gh7WzYU\nYcRThBaf+bGNtrk/cnngMAJnnr7ln+fxzPxwYeSjRkgi6fizDsvdfe68J7Jk\nkHa9gcv65vTsU/WKX1mv5FX0ZrN7E9lf0iGo0Y8loN6gxzRIy5yfZjNzpBLU\nS8B8x7Vd5piLGEoDwXMLihDycNiQ4RCc8miQdn383YEWluo3kzVvRykcqGak\n579q9AfRKwMPigsy+rkMHJfQ2dB4OS8c9bhM1MQSiOEIk43hti+6elMjPdue\n2vDOsr937m1wnPp8rmaW77yqeO9tCKEDRzh326LiCK/UmRuQLOzrnS8G/tZy\n830jkMPb76pQ0eQFsfnOcCa294DPcVwJPtj49wCInhNGb21VeVfOS1rfRAYy\nQx4azxnf0bIYJSzo/vqEWI6IiJO495nhdNMLvGdJE9bq0AsdgDYm5CT4qaL3\n+RWn\r\n=1W4m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgtmMLohJqUF+A69up9SeMwaPV+cBB/r43BIXIYIfffwIgaRUetJzekt2xZp6NrrH0+MllohWRwIdup/VJ895vD/8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.17.0-canary.6d056c96.0_1593551391231_0.7389260930244064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-fab","version":"0.16.1","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.16.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.c678a9d34.0","@material/fab":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"^0.16.1","@material/mwc-icon":"^0.16.1","@material/ripple":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=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-fab@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-Co9aKgpVxKm2U2hujbpEJomL4zW8+ylSySdZBbomUZL7e3omOtm9XQD8zRyszFskQXTRLHEmTtX4Zq0MT8mWow==","shasum":"04ce148152a48dd59f92937b8a9b230bb4222660","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.16.1.tgz","fileCount":16,"unpackedSize":61399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tHCRA9TVsSAnZWagAA0SwQAI3ohqZh1qQ9VtDmPTNi\nIzL7XIBXqoIDbSSx5ZzbZuUq78zMHXuQiQaV2qVsx+c93ORCwtpIhWjpj5oN\nT80sJmaoPRBIEOUowD/lUB0NxEphdCuqvIwp+bpNFwcPSddlBulIhoz5GqUJ\nK0qGSFXis8taF1jueh+SFjdBO/JM7QQQZ0EW2EHW9RIvOkPcsNu8ZnVlz/+u\n2ShBSL3tOqEGPbHRAdBBNsEsd3+LI4Tb23ARklBAryi7AsM/xKkX6YXeYBjg\nXeW23cyD4p3yaOV4gLDZDRN6SFvLpKL0x1998cmS9mur5vDVfzIJ1akZis6w\n0VvzsTz8ffaOhXQ7KBbiOobX9tMmFW2OiAnvIbpHkV65mATd0rIzBBLAfpox\n5RzHFsjxlx3kOQy62S9pDQ5ZcPpNsTJ+OlA0g3I4VhHX4FC1Z1BGv6t76fHp\nFZCyE/d6zGA8cPNPj4KA245kZgTW7iZW8BlMT7FjDvMr2nzHbD2uODhwRvdy\nz73iAcViaEM3JSFpJW5W0oYhPEQFA8zeSLC8+mH9QgKmjN0Qy2ZlVsOpDFoE\nvqvcLV3TE0HWGiJHWjWqpQ1ilry4SjBT88fVZSOCTtUG7/aKvusPc4XpVOHw\nANRr9kFVfjdNTjXCFUXpP/agzMKSlgG28QiEXTDbSiO0fq118KSY5uddQt0c\n5Eof\r\n=oX8W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaokVHIV4o7CSjKqRcrXDaPH4yBXkSJ2XQEWrx1SnhjgIhAMjrvBLHKZI6ZwIxcK8L3VkuIX4ijp0n3NrYeBgp9oDw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.16.1_1593551687272_0.04898545400388321"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-fab","version":"0.17.0-canary.f7e37607.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.c678a9d34.0","@material/fab":"=8.0.0-canary.c678a9d34.0","@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-icon":"0.17.0-canary.f7e37607.0","@material/ripple":"=8.0.0-canary.c678a9d34.0","@material/rtl":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fuPyV6QmUkZb1AUO9GzZS0Xeejqn3ICaJBX9jBD/2o0/K43iG9IuVSNrP7hl6OLFn62qPop+hSfsKPd9qn7sAg==","shasum":"ef6f8768c45709a7840159f76f5a03cefb54f3b1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7IqCRA9TVsSAnZWagAAOhoP/1zzeNsL/RchcWGxSAsc\ngggo7GIzrChy3H3nuRMLI2M8RT8ZJqC0NnNz591mcysS5E6hVZ+myYQig8fa\no1ytVrnXISZnNsVKUQpFpJt6roX+VbWwVXQQOgDi/9nnquUtwU2jInYAK0gE\nSETw/XF+kSuF0/U/A6RViUow7eqUWGkfwkVUYDN9aC/hXCl/0sbUbB/F2hkO\n+yOBc5Fqy8Jmd8ZxvM7z2MGNDPd83F160AXFjc9v8OZRH0061KhxOC3Rm/Q0\nt6v9vNaRzxfWj882EVB53ZXITjV1KAwmnDm4fHR24Qe+t8QDoIztgfKexCYQ\np38JEqtbDaMNXRyDMPu12Yi7bBAUJSp706L0P/mKybkSjK7QGChRFXe323Gf\n8m3ai5qzUz3YAPYu8tbt45CKcCZnx0SKyUpZsjmsg7kuQV3/W18ghBqoIQgr\nxV8czy/rdFcru0UDoN4kMI5mWPUr3oVF/PgKI9ze04hIZe8uLQXpfLXu0WpW\nBfnoibXZXnuj+uL9vABIW+eFE8Du44G5soNRh3o9GONmzimVF4ZgVWWW3yTO\nU9qqG97PL5RtfcJOxL53MmcMLkhRcswWnkcidDalJQCfVAqvwnat8ryp7Lp4\nn63G1NAwLQAx4wiMvxr7kv3WTghFmUAmEGZIg6vKAc4yX1IWY53xeuf5eEYL\nJLWb\r\n=CVGz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcoNooSvXA0HfnOQcjCX1JrRfAnFgYz8oa7bULz1cz/QIgIijcKGq89hYri810EWk2LpYV29BlOtjO39gMpJaIZOI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.17.0-canary.f7e37607.0_1593553450455_0.5543920826845563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-fab","version":"0.17.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.17.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.610c26c4a.0","@material/fab":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"^0.17.0","@material/mwc-icon":"^0.17.0","@material/ripple":"=8.0.0-canary.610c26c4a.0","@material/rtl":"=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-fab@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-RiXghjrwrI8DWPoQAEf0xicQw1lnvJ+qpe6GUeO4jVIAy8PsyUoWat7dMazHu0kryu9i3JZ09J2nP/bGqyzOZw==","shasum":"42c9580776ae21f0280d360cf393e99c3f06f599","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.17.0.tgz","fileCount":16,"unpackedSize":61399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeVCRA9TVsSAnZWagAAXLUP/1ZAUtWL67xO2AjSV0eM\narKgw98+7dc+0sU5ubLx5+LTav9ODfeEsixK0ABo+/C1lv5LgaKPrXk4YBny\n8AvLd9yC32BaDyHM0owIfmiy2nPasQA1rv8iHOVUNHhHDrelipw7vKC8DenH\nMrMYBQfACuiUxGbC4p36rHP8nu5MrZ8G8eAAXnLzqppV25gT3SRthVuJYAPu\nvUExdp0IdwXp8ogKnfdNLNT4DDNPHYzg6qNkzW3EbMk5lGt7yB9GOiZqWHSA\nHhLvfd85MplmyWHJsV+FDNNBmsl2Jg3DzZitG0m3/F1aHNpboJt+S6MPB6/X\nvUdYMsJfvBc2UZaNEEG2jn0tRHyQ8BRrRW7owqUjf9lIoeK28T0ikJnmxo1Z\nIvwdp4kwZecNIhhreZcSGVh68DeFYs/ciSbSv3wRSHEf/q9IHKYlf/87xAqM\nr8AgbQRFVBFAvDC6ghfTVdSd2baGKaT/y7cqE9ZOyYCYBlyJ3pRPwRqWNDvr\nbhxQkmhsQqr3dyt86lDEAFNYDfI2gQ5FiUlCESYAUFroHlRU4JWpyy5AaGdm\n9w4uAwuXlB/7N7+wgaO1RyP1bBlk7Wm1grFN5DrPSiX6RobIiPNTeaMW+K01\nKb7xprnxs8PCvQDJ9jnZMGujrtEJLH3syQoWEjFXbTWJbb+9LGP9qwAtRqls\nOc/W\r\n=xy2x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaG93F1AAgHfyJzWSPGqPbJsYdosk5WhPPXOyLDFI8dgIhAJ8BjWxUYi9ITUOlH6qx4JTrKq4uaCP27VqTv5Zr2PHE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.17.0_1593632660978_0.17467424951634336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.0afbfef2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.610c26c4a.0","@material/fab":"=8.0.0-canary.610c26c4a.0","@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-icon":"0.18.0-canary.0afbfef2.0","@material/ripple":"=8.0.0-canary.610c26c4a.0","@material/rtl":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KoiQPjKl4Rnj5GlXohv1Xt49Cfc9Sl04NcZzhKnuL+HgwK6uc9+ViDmDMLQzY3lmUlzVu8/Gx+OJKmdjX43lvg==","shasum":"f1ecf6175c2ec4d41ee903a46a1c332e46aa87e6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OecCRA9TVsSAnZWagAADJoP/i8FmXh8HSK9gsRj+AIH\nE4R3JyXtXUA7B+lIxn8HJjMgHmlSOLJxibYXhJLHGedK6orDHeBxrOzwJyou\nGcgBMPDESuTokAJiVldU2rw8FmEDINOTn2X4w+M0kZkL8roLkYAh7iYkUnjP\nXSpdAkUHxtXAsQykZ9EHzNfDQNgTRHjGl+/v4XgKP0PRrXG5zzvFEfXqWmya\nIovdUK/G4o+DrC4Ju93KCjzOKDcxU1WHP84apLpeqXQMAONk7tn48rfetIEi\nUX8pxyJay1BiimjN8zpgGckrdH9cTzbA+ODvlQqwNLkhIVF8d9k+zHjzELLg\nAREQhjOIKFvOAeSPsstJ2Vs1ubkS0DQ1ak+kk7ycWMDfPSIaPk/9bolTZyjb\nweZlv//jRgPfOvUy+fi+jPBBabC8x0HCxqDmnfEhcj/OjyZnWdGQ5Ihf3qto\nG8RVXgv88PUjHt+R4xIWkQPUI+gj6pQEASlbwB6aCtfA+Y3wLYgbDaXeVIEX\nTIoDy4AmiNEHrRJdP94Jv5mZ0b+ReIv0GFIZkLEEOfETfPmXqv8IJfzTbLEB\n1MfqN3rpm37QaYrRVyEdeLQYrXrNgc4Hc4wksRufkLP7jaRLYwPi0vgD+Y1N\npydSetUrfbLyz7bt1ZvmiJK1od3pjTmw8Vlu8fdkxlhTNZjogAHprBS2KF0C\nmbn2\r\n=l4Dm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwiS+qMi86hGQvt6zdNSBR1tUyJpQpceqtPPjrifdlzAIhALzMG29aLplMtngdRwbnr3SI0fvzB46DWT+J+8eytk8c"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.0afbfef2.0_1593632668068_0.251748537653411"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.fd970958.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a78ceb112.0","@material/fab":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-icon":"0.18.0-canary.fd970958.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CfnhbmY7l7VE8ujUhg5gciUHRPCL2Aaq6g8r5OjCM7VOLhNL34hatsyKl4tlkkZFdY3uRqPBUiJGWjsHERtD+A==","shasum":"54204e802a49b5b143bc5b8ff8b51968c598522d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1LCRA9TVsSAnZWagAABLIP/0aIdlCy6sNma49FTDlE\nKT97jwS+alcRvlwttnPXLKMVk7QWll8hiCbBI/RGr+huqqdvQiDSJWJOTwEj\ndz1Msho5G1OJdH7hfv9TEoNg0f7hHBZPF3k6hA/6JI3yjKMFiM9f0J18WaqV\nTMS3AK7y3VN4FiySo3HTUP3B7trCAsdz61y36khIivKMQH+loLuRxAOLuOqY\ndJezdZgojuzLfghWozKfomwWB2e0UFKcTloXq6u5nOQ7IgGfIhvwR/JJQqBi\nHf+9gANqI3gvE6QWl/9D/0OC17pFdBHoJart/Exa9QoCiSMQIlEhXaR7JRry\nXG2RoArp1MLP59PPCCtFtuJ4fvGTnd4wCAQKfbmioyU9jPU1i0W2zAqJ/Dgh\nDPJnY/NYUWv5YLFJ56+ZSMQ4MI4xmmSGwixK8L6zmu0KNb3pLyZvCx9uqfF7\nNFhSXwXro+WbXOqltuxR325qpXCw4XQxk3QjJ1N/w3DYPFgSLcvHdmAV94Fl\n9GyH6HhNvkhC2luGD55JlmS+a9glw07PZSOtC48kqiWE8yEN/7SI6Io/Ardt\nkhL+52I4ZvNZL+ajHlWPx5bFzOimlDLcGUThObL2x0jANPGP/Q7NDztiZGbn\njsvT92kBC4k58Ua6dDBqeHJMmrVUnNruHCYl5ywJtDUaM5pdFbgkexalwOOE\n6awa\r\n=hgMX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5MZXm0VKqzcTbhr5iqwGJ3Sx0ehYyMQSi/WOVF8WbTAiAbPEs77fFNPFELFI5d1bg5aq2cjr4dk1u+AhP3mEIlHg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.fd970958.0_1593646410464_0.8438814384983007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.fd44be19.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a78ceb112.0","@material/fab":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-icon":"0.18.0-canary.fd44be19.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9dacPsEbVDhEVc7GOV2b9XpjSwo855OIEPUuUwRDonyJICvzoHbSDD0Rai4E2c6aL73psE00Z496kBPnWRq63w==","shasum":"cc394c3ec5ee79048e84a6bd943d5df0dd02c6f9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUzCRA9TVsSAnZWagAApigP+QG0gCtYqUnobbYYEYKD\nji2ONFXoVi8xlCySVPL5STys/GtfUUu6vfnFEOE4gH9VKhiW7Dbt0zjMKR6A\noZdizk7iqmL7/+VGGYPijS0hDs90TF7roqHX/p4DBPgeo2uD7AX42yXQoaev\nZbDhW74fNka4fwbK6H15f/AeJ1Q69/bRVQP6K1Z2GUFkJv6x3sjILotoBgNR\nM6A/7f1dCZTCvB/lw+YKxXrqxLkSNMF58/qCfq4wcQEiFGceIndieSlgOUeM\nlAG7Qm+3EFYg2x1pKyuYp2rcTxMahL9oXW7Id5K5/CSS3Q9JAiYh83VnmX2s\nq6r6oVUJInz+E6IvbsDznyPy1ivBldCgetvGoaWoMYLcfBoJSQXZEyfiJr1H\n1EcWgdSTw4bxfSh8Bg6BOHbiJ/7dn7CcK+HVDQI5zR9e7RkJcP6+y+3XE+MP\n2Ysz95uCwIMyvG7y2FPKp1767dNFTUudYv8fiml5tePH/rFuvgaILMF3BBIM\np3l23Am2W++H6UHU7AB4zoAmnQ5usVaAntza3iuTzu5zk6F+dTuNtyzPCEt3\nyqnjPmf8NUiXnYQBC6shtx3pcR8IPETW1BdXF+fRFHu0ixz8sTFM6G0qcvU0\nvvYwv6tQI9+/4I4uUcn/WnMwHWF+Pk6kTQgnzKoFVWCpM6PVkwFwJzCoEWvu\n9xvv\r\n=XcIH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd4d1BTAnnIr+lp9VfRc6/g9kWUvuJ7sHOiNJx0vBzVwIgUkPE82w9BWxvzxuR+0cLJgcr4L9wBwYO5TyR19oBXdE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.fd44be19.0_1593668915483_0.40001645270342046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-fab","version":"0.17.2","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.17.2","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.a78ceb112.0","@material/fab":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"^0.17.2","@material/mwc-icon":"^0.17.2","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=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-fab@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-YmN+IlP4sca3dD5kHi79WDaha862QH1FzsgNLuOeL9tz3dE6cmuYZ7v7cok1LZVQOd0oVbGmJsTdfdJsFYMDXg==","shasum":"837e1aa489b7673a434fa49a3c319e8081721a6a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.17.2.tgz","fileCount":16,"unpackedSize":61399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xd7CRA9TVsSAnZWagAA9CIP/RnqJKkjd4R2+UU47sCo\nJ1x9o/AqJfxdU0lYOJCfZ3NGMzKt+s1xnsVI/P8R2FAsISyrw59EqNNWber+\nxQp702kmyYlojxHfYjUvIiQQDf1750jOO0nhcha8KvNWoUnxrhFoN9psKJoq\n9Z7tj1aQQR7ZOq8tN7hpS1A44Xnl8qQ7Bdi46u0GJJ5rFQMlYQQkNM1CQSwn\nUmMO8FUT5CeXPBluv3ti0EwtdBPUI5fNTBB1iEjm4cS0pb44VN/u6gBRXyzZ\npJuX7f47QkbZLQqKi7d5TF1xSI7j7U9cYgQ3VxA+IEKvQjYewlRCoR1TcC7d\nRwnk5ftbSczZ7ZI/sMjidzf/aMXgKi/5xADt+TnBk50M/LddQmuyYpGuWhyn\nKD4z1dJUEe1gFleKwZVzyfhkJuyDPdIB2AEjCFeG0vtzbApKnq3kmytwUfaY\n/MqdZw+d7e2F4LUieAiyWaCaMiW+dh7E3nvbH9Sd01syaqpHVWkPjQK0OshL\njGkTLTDSzoJbt5sIrKr8wXeBhyCFTvWQgHN3fOA2hoTrfhhjSxXtLxz72Dfy\nSazp9Q7ZEnWodg5fpxSzAn7GOJLtW4L1JaZADUI1fqRaxAzGPqVRDCg7Y0kI\nasO3uaYmXWpaxOvEbWMZW3XuqOrgLTpTysQDPm4/cyyOVNurOMiYsQl+5RRi\nSr0u\r\n=7ulZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICmhZgVO5w3hByNdbYRfGBoicD1KEYllzr/OLiKJ91sZAiEAiLu9TBTEAFOEn1qM3qSsJKfp8mB91Q1K0TqNM70taH8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.17.2_1593669498766_0.15809390288129088"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.ca6fc6de.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a78ceb112.0","@material/fab":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-icon":"0.18.0-canary.ca6fc6de.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-625o6P6g+Af2ZV/JJdrS0XE5f1Rps+2cyIr2SypQyCpgp/BS+N8pjcEK7oBo7tyyDx9U7zsWFqwkcOc6hx7aCg==","shasum":"78abbdfc3b3e7a3d737259e97141973581629b92","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xe9CRA9TVsSAnZWagAAUrsP/RMM8sNAg83wTU2nBncK\nDjJn01rEy4NTVInoOYeaxEMJoHoqK6vBR2o+7sqTAP5am123tajPqkKgRhUI\n1TNiNZN40lG4bEOHAs80ktb/cvicKUK+6pR0v2MNjUJspwGJcCh/CYa+60Gn\nfY2wCYcPp4t+zgFB5FPLznU1BOC4Isp6NQaKEgHzWleIi/ADv83cSGOEWt1+\nO2OcWXAjhbpcUx+inBGYfiSchU2VdbzkQ/e7BcE3gRtThIqlBYTISsBcd2fV\nnQ5LEO/l5krpWv47u53S1OaJGQr+XbzGtLqN14bpG6xgnRJ67yJCS4255AfP\npPxCT0Sef8fnZ0Dq5OCTjnrzVPxYMzkc6pzq4KdLjznZgcN1y3RYR0LntXqt\nNAVGhd9oEFf82F/abeHJt5tj2bBdxv3e01hZCeSalxg6AT2h8YCLbBHFsA18\n01lpoptSf7NAik7LmmLV6g7ujSyGjaoUJD2E3iJEas57rQbtENxXfNByY7w6\nhIpoKTMiaJ9JF+p9USKkRGtjWUb8KKsGH7jAMiq49qyL7N3ijVTnyLpO/Ilt\n69fOx/qUgkXurMTyKnWhNkzrSzBahnq57/CQpNiNw+PScV7eTY9M11v7M1A/\nDpwAW88sizsCNUP+9OVkmdnY6ZC1OhMreKvO9YUWeJBp77GtU0BrN7WuKl22\n291z\r\n=Ptwy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEFvIJlOLdy882pnK8OzCMK2mfCbR7JwOYZXjOh4ZTADAiEArEqwfg58v3C2g3P1bTm7WSeTjk2jC3DHZ4PBRJ9aF/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":"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-fab_0.18.0-canary.ca6fc6de.0_1593669565128_0.32897157245514386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.79f1ec2a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a78ceb112.0","@material/fab":"=8.0.0-canary.a78ceb112.0","@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-icon":"0.18.0-canary.79f1ec2a.0","@material/ripple":"=8.0.0-canary.a78ceb112.0","@material/rtl":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-obiZoP7RdmgGF65FojYbd4uS2KUte2PuHsyk5Y6BL0yYdghJ4cAIKKmDekSjt0I4xGgworYjGnWDBo/AvcAV/Q==","shasum":"8ed3568b9bf7bf614ab75a695736d2034366c0f5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLG7CRA9TVsSAnZWagAAXR0QAIvsYzveF1yuLj5Ijyba\nAKLZxFsK1Xz45GUxAAqEcnAXKI2Pe7Hl3Z9/nVzAD/sRPmYAvAmRBJGApiAi\nbvKDzsezZ15fttIkDpMD2aWPGL9ClQQgin9/MKLcWU1Iq+Zv4CANuI16YeS+\nl7RvJZalY89Azaps5Spn5LWLdO92Ypo2xIFGH5graZwo25Q00UEft2VvSEZ9\nBS2BAFvU8h9mjhRmInlsPJNLZz9iW3VZ3qaaB7gA4eYcZHU31tJWwF/Tbyv/\ni2fxI0fhOjXPx2EjtiZRDeJeneTXwk7y2SpEJCh+9Bp1RKAj3XUvoCB7u5dp\n4CihLQep10p7mo5k486JZ79hdbpLgamHHIhwtXgtWblKQcI2AbeDxYF87lRc\n2AqRsrRLRYnIkFR0U9xX+vdK3+4WFROeg33VUZZJpIvOm8eorV/XSvxtM7v2\n3gHEZMBapVB85mS/qfBESU30yzl3yvEPBw+WtdiZtsOKup7NqyDbArvjTHbd\nZuP9EcIZEveBqBsoi+1luCEjE/epgDNGE5Fl9kUq2Qy1mQuFVKdua8kiefar\ne8tRbwm7KUYapiG9J/gNhmFbEmwIvDTQ2Qia+OHUAgCtUOnXKGqtxo8GBR/k\nHP9jGGzLoTC9Tn7IUleKQw99PKeY7/QUXU+IekjUvjOvCd7v5h/QNobmpPd6\nb0d8\r\n=12rP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAGT7ntjvTEGYBsqQaWAwa5s1lo5Zl5ki43tJz3PdcysAiBnE546rT7BEWg0pn1Feiehy3dYlzdyUz9UzfagX9t2rQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.79f1ec2a.0_1594143162663_0.05173295979941761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.a7bc45ae.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6ed717ddd.0","@material/fab":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-icon":"0.18.0-canary.a7bc45ae.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wqkP62CPmUZMp3DxZ8w13INpi2yZV8l41p07LHqPrwOCQ34pJhkVUTDOqssT50pAtU293MbKcW1NK77zx3Zm+g==","shasum":"d27e7041255db3f5ec59a49981274b30d96c7775","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KBCRA9TVsSAnZWagAAmVcQAKSfBWaJsq/9OcaeH+vt\nnw+7sCjH0S6M2SbZOmA2Ui65C930xLklJPEn5VHib4wuJWsqMpEs561cfb1Q\nn1B2QwHadcEOv/JvTmfzwRql6D8St26spy0u3VW0K66HCUvq9piKkd4vmnjU\nUfMUTSD1ZfmqUtXwBky27GUCeeaQ68yU1RtSViRaMBs82JhbfJRw4Hg4hZ3R\nXXtTRD5SxAkTBEBr5IK6SWeczKkkzsDu9BW/Cq489Xk+e4jjEat3REGJm0wv\n622rX1h1gqs0cQOo7PHLzx/DxeVGU/mOmzCK4GLWtMb9zMrx18wPhmpvZIIk\nzTK/nh7/lebc84ZKCGRYlZcnqN/tJJu2zpHEGbRXFu9R/Rk7jMtWFN36yDSZ\n8+mDB3wqm0M9MH4WrNlrHDZ3i7nM1QwdNJ6Vye+7ZGmO0fPy2pWCGKn8Cy2r\neoLxL13HDvBGYZGgM8lIHcJ/w0aW6VakQ3GyY6t5JrMsYrnkD1cYatCL31PR\nQyCDdvCEwT39VsH3PUScvUWHbJ0sVLCCDER03oXbrv8Zvntyobwnn5HL/Qqo\n9SRlittcaax85FvLJPSnd55sdkMYe2yksWjOjQJpKUn9GUtHI+D7ccEl+Cum\nHRmM8X9+egaj1u8GVxnxKDzwlxwga6YSt3Kyf75sIocHfS9hMGTh+BguaM8l\n7o63\r\n=K8RN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyaC0GCC//3vbwM83HJnuSGedDh/lCz1RGPIFit2PO7gIgDv7GZkLCVWKSsMN6NGy1oLElxTD+XGLFKfzFgOvdcAI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.a7bc45ae.0_1594315392761_0.6041888372896158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.b184bc1c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6ed717ddd.0","@material/fab":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-icon":"0.18.0-canary.b184bc1c.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KHQSvkdwZ77FfDJqwONEWl907+itfQCBakEqzIXAvIKVNHnhokDAlgxh9uV7+UKJJNmyy9qQC0psRfza4LjPxw==","shasum":"d2bda4971ff75e3ee1fdadd279bbe7b920e83cc4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SuCRA9TVsSAnZWagAAlGAP/1GAU2fYpIK2zUCLMbrq\nFvuEwTulcZ1a5PIPnvSLYD7jFXdALrPYg8884Ik28zK1IK7X5830ET90nBVm\nBJBqabFQ/eOFjELhJfavAGWCKnDl9O9Fxj8zQIBGFlH4CXl2NPb/mrjbuEKo\nBGS21rtR+C2Esp2HhY5zdVJpTSsQPRWRgRmloqVHN2B72n/Cp4E31H2qKm3z\nerG+MOlMtMr1hQfDmnZHnSYuLY1UGhZHOzabwMZ+LimKJPYOTUd7ElFwTq3z\nl3+aa4zO8VJsaHF1CnvsIIdKjXeMX1zA4u20OLn47Bu5NqjNXjiUUhPLJan1\nRTYcRPL5d9IfDbt+UVaTMQdt0HzF47QpOo2i9lVWrj3jzm6oYVRgXet1skFL\nz5JlSfqz2xgtaHDoG9DOqNPgesMlXF+iYMxoVsmmS9JfbrgQ7aWcH2Cjanyi\nwU9Co/bZbHKra2g49iigDby3Vuafc7mMmH3cmjw1ARXziKoXOlpD4hsmbJDE\nmaD7jtwp8pHHdtiw0nZLupDrPRAxOcMDF30Qd/8t5V82kA5pSBmZSb+iIfAF\nXHXZtijHP93smVDml2MMSCAjMFVrJ4FAJYqOOGe6D4R2zGUq3GsnfBHWB5EU\neMCGuPa9pHoJ6+P53VNoztf8GQCxqpG+D6k0Rvd5MP86l+kRVdu6qkfmWQrq\nTvIx\r\n=00su\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDinBift6Tprzufga4JdpdCEWURmnSkQ7BbTog915o51AIge03HMM1iG4Zs9LTkicnTtTRrtDpkCZ/NrciSS2Je3Go="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.b184bc1c.0_1594315949910_0.2268276663860116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.b39fde62.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6ed717ddd.0","@material/fab":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-icon":"0.18.0-canary.b39fde62.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1+5ulEV54CLJc1HpN9dqJuSje4Ux121j0Gfk6Xh49wlAqdfCs4lDQR3Mj2I4ntjvmc9PFIaEAfQvs3md0dzztg==","shasum":"e11fe726c8c926f33d80372d68a6c7f2792880db","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XoCRA9TVsSAnZWagAAWQIP/1a1cLP9livhKUt5DcrT\n9fUSf0AHcKxUPxfvwoko5d4SELDCleelSn3OhPLgjWGxJgpsbcbsgZ0RjcU3\nMmMIYNoF4VTzpOCfanLm5giSiIUgdhIJmclxzRTiOp1Puw+k+kM6bCmE7sDS\n/cw0QDxfHxYBXvUr2tLNFVP+MJiD1Z6eX8tRfF+XOtC/whgmy8gDfuJ0yVtG\nGYbRWW3XqW8CqL69kNQ3hal9PbS06j7zN36NxPD5NkNWziwD5lmwqFUnAaQS\nPCV0rg+qfNYXm7vk9zpB02zuCP817dTUONKAI3KhIm2wto3uO7vwNbCyEDre\nu16NxhG1sMd5k4rkuh43k5tEINuF2qu4rID77hVZmEz4tn8PAbTF7/hInjyr\nBBYojnsJNymRq/yQRGSQfw/ByI2bMX/nAovZHg01+52Y0Pty+Wl0tR/XBIBk\nCO2DzJzpEYB1E/5mIBXQAEZX3+1gMkLEjuStCsKOmupRi5Y7D4S8OItTC7/o\nUNnwDM9eEVEJnfNfeMJOd5lKvim35MwUkHV3EQ+cExWItJObxNg/LnnPKaCc\n/qZj3Ml7IQd1Z7LrENgPbm0n2eBiVFj3GpgwEQDf6uHlqm72XzgT1XYbErRM\nP7S4TTjVZx+ql+XeGjdw3AVzJ/pN7zZTyWdcpd4wRaiXgjOp0JLoOVPeP2Vy\nRE74\r\n=dw2F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtnU7QGYkb31ysb6zoza4PqCvyCzSEU9jgJBlBviixIQIhAO7EjXFPiUQLVRT6q0MBgF8NC3h5TTMHir2+uhed2EfF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.b39fde62.0_1594316263783_0.7060859149170235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.dfdd8d6c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6ed717ddd.0","@material/fab":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-icon":"0.18.0-canary.dfdd8d6c.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-pw7JdTsLIQhFzR18D9SBl9WkQKXTay0PpTnH/qzBHrGwVWzZ4dSj4OFAGh43K9k0dgUP2yoAN1gP7Q7KruGyJw==","shasum":"47ed9ef08babd94bca5387d45e14cf5b379dfa0a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2EtCRA9TVsSAnZWagAAX/0P/0LThfnr08OMmPMzVPdx\n7gZJyuWkeff+Tc03BJIkFC4gW5TrVZ3NFjdJDqNqceesXjNhCcGoMUIFWIkN\nb9JaMuwGaZ0t/+qPK/zEzlEaW4DbSEudNvNyu1+/jjmFkh8YGZMpwfQygcwZ\n/5F5+xvCuTQdkY4sCe5G2US/w9KniKzZRsl3s3eSUNK+uPsrwPR0tlcP7s3j\nyYRtYDEYV1NMwqKrN7oFd4q7fy3Ho06YeJiyKV5d0Gx2LQTyEZv+Lklzw/Qk\nkj3+iOQ4vO5RFTOuTAoX8edOzNoDx0yaHdt7vGdZOaTkYzqoOo/GoLxtCBv+\n3XO5P/3TghyOMnkBNWZnRe0Vpumou3tkUwt4cezsyziB1H/N2q90Xnk4wd7o\ndCkU2ScAbQLVoMKZUUeFfEBo/D0i4HJEkitoOk5wB5KOytHbotJpYQucRkv6\nNQb6oRpDbTRcy6GeQBiBwId58eSBdaUR8cQQCAPaKeyJn+i194j/fL52olnx\n6qPXNI9Efxf9qgrA0+NHOd+QoaS4PlB19o4wOrkiI8oY6YmDh6m23CxggAan\nB/4anfn8RX6muyeKNp54tlxHr0ZCXduu0hxxo1wh3zhP4qjJ9o2stj0J29GH\nPGDVRWPN1hoHqHFxypjoqA8OcCgN8IZEQn5gsC0wTrNBBTuKUPqXWAglkYKP\nPGM2\r\n=3WCd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFoY4vpGDbcmXnnLnZkoxstQkcyB49j2KnEyBGLyO/KpAiAzG/zTodBy8PhWFoLUooVkLW6zC3XBS6mj9QKrn/SNww=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.dfdd8d6c.0_1594319148832_0.15835191470608367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.11cf2694.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6ed717ddd.0","@material/fab":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-icon":"0.18.0-canary.11cf2694.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9P79mrwC7/V50l9sCNOsI7yjQyPlgwRNbVVgjf5NYxth/ghlStYelO6suv0gjq8JqaZdoVZbKO5Nub/Z5TrSAw==","shasum":"4687947a85b4c83249b3dbb7571b53b49659de12","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4F0CRA9TVsSAnZWagAAcAUP/RQBe+48bCCks2v908Tt\nJj4PAwcwxW+bsUxch71Mk25uSShAqj8+/ku7OsmjVq4XnFlJNU5OONK8RjGK\nrxF84zs3GGs0wn/vI2EOqU5SXNqx+Mt7E+Dp5l3dj8oJqSTAzGjfAAKs/SY/\nSDN3hUHIKxhKi9Jv4dCOmRtsbaGss2TvJE5MRuViYNG67Ah/gjY0BTgmzc9w\nSjL0FiDQzwXUeoN+FvEoJ8OzLK7qRWBquIBXDpPm2ZdljzZHEe3h09mGTu79\nkfVNfXNPHj6JWCZJ4AEtXjjxvGZf65nZT5MXpDBIIjRbx6nFuKrHi0VsT9YE\nP7Lh+e/DY4rHjdQNGA3+vEVtpeK+bUbbHvCdK3efFBAk6db0tyfNXywv5IJx\nUSjueHQDDB6jqr7W/Hw4eegs/N7WTU0hzDgPyg7e9z7wCcFN7zs0zJBNNNp4\nzJwhrSXInQkQsbgzBvpcza96qsp1X5ntAwEAbUCv9GSOKkTkoVfBJ3bx5Ux3\naGoklPJm9j3ZDxtjWOrCuS0v6J1EAkibXfMzLy/e/Sk+wSBD+OYgXi0IwS0D\nyyS9bzI09GVygZYnOZ9SwPnRiZQw8ETHf7Kp58vHmKUXA/WO2v1MlGFEIpAy\nn402fv/gUpf7APzmwB2WMBBq0PSKaFJyES3TLKsWicFGHzvoGSiVw1REfZF9\nRp0N\r\n=YPKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp8aXCMbnXmPwQ7Vi8lbBqrbHKOYDHULq1PLnfNdEPvwIhAIdO0D8/25gW0h9mdgi+Cvi26K21GK93c9jUDWSi39xb"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.11cf2694.0_1594327412094_0.5113349585840392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.436d66e9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6ed717ddd.0","@material/fab":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-icon":"0.18.0-canary.436d66e9.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TEEagchLaxUX4eDO18hNeisPJH0M9/vWtSYQdcltGLyCtz+fjzL0Bdb4Pz5dS5k1R8fYq5twQUxApGjgqT4LlQ==","shasum":"e50ce3c6513bcb3e8dc76c8b68bb1ab18b21bcda","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KZCRA9TVsSAnZWagAAml4P/1cwWSrtFUyQbXsUvmE2\nlnXTCK8l+6EqnwMgcGaO0DDJ+Jygp85o7XE5xzi4f8yu++u7lbn9lcpYm0Ce\noofZQyBS9KmcINRenqykWy4lmuZ+zEv1/NAbkYeZ/znlLNxSsIbRou6iTu3h\npPs/DfE+hI/+TuH583QcPfkWzQRR0DjUddXY/LrN6K+o0LDW5nYIa3plVpSD\npQX4hg3VdAaJZujOskiK70dxr2vL15Ts+s2VORBGKFdqD+vkNQfs3ykrYlOD\nbaeXZQidw8F/cnDPEr08sV92lON6fIF2rT2Yxxy2WVtoJTecm5Un4gyQdIiM\nQjI0Gj9VpKsWycRtd05UXveDLzsRChgweLrrPQ9s5QLDZ+/jqrtRv9QHI6ip\n6UR8hh+OP2DiSNhijKVdBluS9d7dI8iMmYx8nvqldIn2LjHoEoVHwqdadvJW\nSJo0hf8MTLDT/nAxeuBPb+MSibqwUrbnzFPBzWux+Aky8HkwXOTIsBsWn1Xu\nwt1BfLIImii8UTZyHZsKoVax/JkE3BXWDiF/pmFkzN3GOLDKC4YN6fyQ6y9y\nprDKt9ojL8HrDREIV9dvxUoyKVJE4e20J3h4kGXVjrCPDJYbQXeeprXzyp+V\nELSwA/n/fS64mZpytP+qNyDN1LXbMTF27k7EMPiLrK/CIA/+csc654eKu0Sk\nxuoV\r\n=6pgf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUr70tgK5XU3zukHDV86Dr2nwiFtkvNmrxdz0jjqptUQIgPEkEm4eu5tsfpva2JnDZNlnkcT1G9tHp/+bj+HeSAfE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.436d66e9.0_1594327704876_0.9612499980531093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.3a44d36b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6ed717ddd.0","@material/fab":"=8.0.0-canary.6ed717ddd.0","@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-icon":"0.18.0-canary.3a44d36b.0","@material/ripple":"=8.0.0-canary.6ed717ddd.0","@material/rtl":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CQyXL6CW4VtlhOK3BCqZpq0WMBdcqu8dbgniDNILsXcyBZaXSIR+WeJKkg7fMx5BwPW0kf7Odb/tpBMNhTxg9g==","shasum":"3cae924b14cc7fc9965ccfdf058db57e36ac5427","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hFCRA9TVsSAnZWagAAfUcP/inwqVtFWT4h4Cr58tql\n9HHaY3BhYhWC8wrr3x0RjzMoxFRzjNuj5ZcZEhFoONRRQBMJ+srt0zVY6Xec\nL7QEQ1VPEqXRt8Nfur3f6FHx0InAKhM0TqfaX/+BYwEG5vDgKD9JP6GwRSum\npXhL1hCP/bJh6t0XQ72Dur1q6ZceO21Vg0SiDG3T5IZ3lnQh8aNEsMV4+Xh4\ng+S0Oq84TMA+Jq6YZ/C/PbNEvRnorcEmjovwsFvvgr0nYw5dxsP/vUEG2P7m\nbvYIgQ8pUPyCzJNCV7KrYgBnEuX9Lrm/VtV71OF7Iw/uNBXtVwWKRhXyzxLA\nJg+PMU4zZBu3E8EqcCKK5aV4+HalVGWVl1aBcGKvJEPfT91Y3JxCNAjmSisX\nyvA2DNjxVsh6+rFjQyRw1iIiyqrTA+roszlVIryjGbRKNSlyUUZAGcgsn42k\npvHlZoE35Z5vFOBq8HdFuaMX80eVWcAiHBIU+JZBvJ8xSPtTJ4MKy3Umnul4\nNLkLt1dElCge+CxxjwO+m/LDS0fpw8gWnAwXyseUn6Pt3gL9oO23ej1B42I5\nvmW6qSGDNmdpr1fb7s29D/j2oOb+dCYedRvrcnbsAsjTfYyCdtJ/9WeQGMs0\naIL8SlMLeMft+nuhxik73XxFIyvOo9kdou+nI190gSPs7cdXKSTJVU7PPjGI\n0k/O\r\n=0ca4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBB9pqhHC76Tc4eDnz/kcEXyJ2ETPi8AeghqVSoE8/OfAiBMOPukTcgabTQwmqMYuzc9SW31eAFJPg6uqbWWTlwEnQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.3a44d36b.0_1594341445473_0.030232480360906866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.ec11ae6e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.1e7cb6198.0","@material/fab":"=8.0.0-canary.1e7cb6198.0","@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-icon":"0.18.0-canary.ec11ae6e.0","@material/ripple":"=8.0.0-canary.1e7cb6198.0","@material/rtl":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-myOLIk2raU8ncZrhWx3AnmypNHAnx2L2fZmRvIA7k2dhABFSUTiaOr0+AhStGRilA3+S/rogPNTu8zhjN+Jsag==","shasum":"68f2754b2bf7598b0f4757864a73fe143586af53","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKsFCRA9TVsSAnZWagAAjD4P/0sNnKDsOxKa3cXJvoAw\nKvxjLQmcJhCiwjhVdLPBEcNhOLuAwhCnZ7rMpEuX1YLRMKMfjtlrBPi81FmL\nLQ0JLYtAty7NSuvDnrCShwkNgIpgeIqZQFMOOXGjcqvzkxN5wK+Ns+c0rIW2\n/aMvdspy+gOrwJPxixPNFtAZRMReGIwcERiNewaYpUXBGrFPBIWX6zf2JwQ6\nQMnv31+OUWsBHR/WOgM9AVHzMJEVhYZ5YnJCNijuU8TqQCGZm4+qfd52G0pt\nIjmQgzkFJQVrToDPs4T1xDrYBbT+i9Zl0YmHXDYfC6dVOHupw+uedPqhuImA\nwrSpAg+Wo2DrQT8GqL8Qsxv+DukZY+etqoGSrM5F+RAkhSZ0VgAMTYj4Onfg\nSbDefP/AXgEExHltPCFtxiJ1pHtnJxfDdwAoleaNZYZFfBp5TstcS6vfFwvP\neVzuJ0FN+MSTHZhMEbDnm/k9PLdd+ziYnyWHMymsrR/QW8f4cO6nJZwoWDvC\nvRKHzUuyOwfgoIKl0/cUoltiyGyHlGfyXI8dbZyt0uIeKiKx1NpBTqRsuZXj\nO23gHMCHEGbQBBC/DIos9YY+57epIJ+z/emL6MLKpERrAI0sRn7ElEiTR5Mq\nsfU3McHHlYWCknXjFvHUhRAS5J0/TQzJO3OwcLH980AaY0n3NN8JHsNXxAzg\no/1s\r\n=Gx9t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC0s+RYh7V1xsoK2ZqTobYpB7uYMTihF4qnTckisk2/yAiEAy6r/ZjI6ABd8wwLqxZQ1KK9YxmO+jfJyOsH9+Z0uFts="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.ec11ae6e.0_1594403588683_0.5134600420526769"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.17f6cf27.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.b2edaeead.0","@material/fab":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-icon":"0.18.0-canary.17f6cf27.0","@material/ripple":"=8.0.0-canary.b2edaeead.0","@material/rtl":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IdgSUWxAzibjZnTYElEZ18w6XoTznKSF6837CpYdQ0Akf/2DzVLZLAs9cXP7upiF16tG6hi9WmnjyZDB+M7T1A==","shasum":"b80a6c9b9b5de9c605f9526b4397f17bb4e4c142","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":61468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRUCRA9TVsSAnZWagAAjtkP/R9YhB/s16lYac9ztD+k\nzzsXuaWvmisJCgE7xCHIVdPeIMK862+kX3hw0HM5OzWkx0YxJZj8o0UBrY35\nbyL7ZXc470FCBe9okqWF0JVUvKPA+DxZ6AEdDiq0GfkOIio81vie0YZPEgWp\nYmOrBc+QdKL9fPMOHelp/egKYNoH5cBAdrPF6sjivRBItMqWM+w9Q4JThY1t\nqDTyv8h03IhvZzSO7SU+EWuik6ajBEPYn4UwKwpw7nw9aZ/hUSJti5lNDwnU\nflCfPIJqCrqSuaylIkan2AAUnPoFBEF2NbZUkYKldN86mhrbIMQzLfWfSmk0\nJNYiMqkOdzGHvz91zsHN5pynLV6G4BwSnrrkE4Qn4le8ty1G2EmtwFlLvXQt\neZiN5Leqt3yjAmshJHSNwEpCfex8ihpJMmJ6oOU2E80LyA+VjVuTXJVtTUKi\nqJssLkPL+z+qtAoCfcRH2f+hhfCuOwPeOLPX4mYkPvlJeKsE5+Ja3SuJIok/\n00DCFj5XOVy7SVsR3EaLPYU2ipElwjtjdXwXQ/g557zfXEFAELkfIy1lVvDs\n0cyzpWGdZWUePv7vA1oRv0oqsPIvW7z4KIbBzC9a8BryV874S7FaXagy0zyt\n7yICp5ypV5MJ50br+wdfeo4NYKEip6Zm9ZxS/i7Y0leTVBgqmj4sqFsHBcjs\ns06A\r\n=gGYx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF1DVpHF5mvO0qml0+TYOUCp6EoP6xEdfrBJW/G1Io5ZAiEA/zM56RT57CpdXzfivIRXKd0u7kMrmDq/mBQc6QiPnig="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.17f6cf27.0_1594405972088_0.3847641828502324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.efdfbc21.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.b2edaeead.0","@material/elevation":"=8.0.0-canary.b2edaeead.0","@material/fab":"=8.0.0-canary.b2edaeead.0","@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-icon":"0.18.0-canary.efdfbc21.0","@material/ripple":"=8.0.0-canary.b2edaeead.0","@material/rtl":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dHBcH3dzA3JrTNQTR7iKPQf+UJZWUpsqQ7svgomKtAUmE0rJ2aLWQj5Pbm4PAeZTf4Uj/TWUuIU0WfNvhHjEkQ==","shasum":"9a74982ca06cd5fb1bcaea710f36c9a3f88f8f70","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":61511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcVCRA9TVsSAnZWagAAfRIP/iNWQKtGhdkqjRYOR1Kz\nK62kYe8MZaqeF7WsbY/73T8K94pUrMoGYngJGUHwEklh8EyLHhoYI8OQMtth\nFRVZwo52hB6UykfLtVLq0wvq/Gn/RWcq47nDq3e6RVTdG3h+DlS/pPxiXuuH\nMvVCdbZ1w/BLXokqgtuA9qmvlKnz60kJ6Fll8Kz+04gFrYfAzYv6rsHNqr5Y\nJ8ASX/q1bFOlB66P37oNwB6oWQifWyUdokcZscfAweqfK+RZbRPcAl1PRJWD\nCE1wWkFTZW/CLBpb0FwTiZAusBOipkzcwh35t3CiHbZHdDtv25F/2fGXog3u\nDQXLNULLJJsVbOz5h+RMqlhszqohj4NobxRCYE9FCJm4xLT7AAZnB97T03Ll\n/6d6ddoU5r18OlSQFMdZQLYjY9341IDLwxizlAA/i0aD7DX2Uxz30FyxFEUa\n5Cq989qeoyBiJ+dw3PqitsaAGsPtb+3dP1mJ/SG3Z7jWx6T1ID3/26Gr8dTz\nndOjQnN6dipMMT1MXxsmqlz7BQy4LGO/WfsrnVk/9WtMYhtlJUVUINcJrezW\nWsKRV/BBfKyaUFNJaWwF1CHskDRT/s/cRqMkJ7j3+Q6CeSE82Aoh+1t8h3vv\nPvlZICR7IDpkPue9R+ms85h/uQ8HIVXNMBWtjQ3Lhk/q5bbfsjh8KRPhiG3I\nhU0D\r\n=c0pJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCawJGsu9Ai7GzSB6Ov5/YFJXPA4KCB5W3LataPtG97MgIhAJBHkLRn2Phsdbomz7+/G+A/aP2+dQoaHigTHwbl/ywn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.efdfbc21.0_1594406677001_0.14755701880011762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.bae4339a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.5dac1f624.0","@material/elevation":"=8.0.0-canary.5dac1f624.0","@material/fab":"=8.0.0-canary.5dac1f624.0","@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-icon":"0.18.0-canary.bae4339a.0","@material/ripple":"=8.0.0-canary.5dac1f624.0","@material/rtl":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-OopgRRgVX/bZtTGRI+ndR0Y6+lXNHlMGtlytj5HRGICKSpU5DS1FV4zxW8qnJ3qGSDwy68LlNYHrIoCk5mwHGA==","shasum":"d7f42bdca62e4d7c2323f4d7cc8f62870d445e1c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":61511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBYCRA9TVsSAnZWagAADc8QAIWx9p4mGD3Upq1Yxa/T\n3KJLJaj5h5IxymqN2m4/nuzAbOEtBSiT9eoBYnGQf644yV2lotyRXY/Y56zZ\nyDdlUTujO8BDqTLTgJlVWO++kcuPXXxVDqGpIg7q8xJtrkNwRXTj7DpkEeGC\n0rDz8lALInSxyNOgLaIGjA2c9nqXMHEoUhRqXFyNR8mfVp7cx6O1ewxr5mez\nR7LXirONu95o33QxGAk9l47FxYGm/dOu3HQRpx0A9UY1WHdoyrNxQJR7GSHI\nT4qGUqFncx5+UmbpkpPOvaRxYM+tfPNKpHnHB4sylemjxiPAPnmDC1TwXsHv\n5CqdZiiYfeR2nQ4rynNCKheYhJ/xjjeHMIv5NhWbZC9SEaD3HOvNaAq4JumL\nmwtvGjl8AR2BeaLcum/RoIxc2HQNgYkTFfUMn5Vf5D1e7cJfWWmepkKZcd/e\nBqFqFHhSy+lBtnYGVGDagPQ8/npFqbmkrs5z6AuGHB3qJkhK3V7S4MYeelOJ\nON8Ew8IqG3p9H26j3pcXbiR8ORMuabCVUsLFN150a0ZR9EXOcZc737+FL2AS\nSSUV5aRbUD+F4rGmGnWh5Clw8NK1GJmNzdk2HD97MsbmUQ9+RARu5TMNSMBa\nugGURDkwf0yuaDO8sgC2sqDnMqh9CI3F71V4EjLCdKy/Zc8st6OigYD2g5zV\n/7y6\r\n=XNFA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBWM5509h5qgW5vDIUpBANSXluC8Vjw0N3DjdkcS4rWAiAlqgIT+MEKp1HVUuDgaIu8GwxTAoO7EieXopQJtvOmHg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.bae4339a.0_1594744920358_0.8935149839269676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.28eac13b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.e6e23019d.0","@material/elevation":"=8.0.0-canary.e6e23019d.0","@material/fab":"=8.0.0-canary.e6e23019d.0","@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-icon":"0.18.0-canary.28eac13b.0","@material/ripple":"=8.0.0-canary.e6e23019d.0","@material/rtl":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-b0jEhBvoVNuZ0smbxfz8RUNhYs/wR6eTnFHPnX03NhTIBJPGOf2jjBTGqN9PdGPjOWLHlGdk1yJn1VtEfJCDxw==","shasum":"18051dfdaca14ca487c2edc832e52b00432b933e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":61511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBjCRA9TVsSAnZWagAAhw0P/3keMww4DVFgbcVk8G4x\ncZMzjk4YhlFB6RV/2/pAZvzMcu9wDsfD6tGmT8YQQOOiRtnTPzKH2Tj6Uk+v\nb5UMSvQhoBfBDhmmtMK21BbnXnvco17AKybA9PShNRAaX4xiXTpQjSNNjxvZ\n2b16gQ4v4eO4EkiRRDwOwDquKNgJpGA3rsk5pNp12Wbh1RKnQVFJvMWGeElW\nfW3SajcQTv48zFXa0HEFnqYM3dcKm/h9MWuFe9PIl/XGF1ZYGNP0T5O8ooAO\nvwB5ULAs1e2hutFcO4U8l58FfRLf9dEapTcODfylGXj5VHGUEgsfZHASuXLH\n2R/NN4xhRXSeQ93BWM8EfdV9us7taFeMiy8tzei2JJCHFIfPJ9yT255Nqq7z\n0x2AnoJvRkFTmQ9gyjvOTwBL3ce8uabwkHOGGRkjdvjgB+jsoVdvYCKuWn0e\nvrSrRBxiPJ3zgTVG5qD/572JZUcn+Ap+ID6WNa6917951fILtYt7EeLbCD75\ndCZUv4uFSlvAorSurI09xNcjkX8RHLUqQIOoXwSRAwMHCgr5IpJjOjquN5aK\nQMy+iktTUoqvXUFwJRFPq4p4bd4qnXKSXKyEyKSyuYjsip1VQ5hn2DuotC1b\nzPBeuwhNnAd9WiFzSyfKhiDiEMN8emLZ5UfrZAq8EiT4cqiNkGtGLyGQE2Q2\n4tJd\r\n=0ap5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGcgauGY3IkVMkPf2KqZyIBoJVU15O7kki/i9dMgmFnFAiAcXzG8Upe0TjQ9KzIYtIRRRwT6UqW6UsCFHK2n03+a4Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.28eac13b.0_1594765410748_0.6350708716038598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.44966b65.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.ad4df58c1.0","@material/elevation":"=8.0.0-canary.ad4df58c1.0","@material/fab":"=8.0.0-canary.ad4df58c1.0","@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-icon":"0.18.0-canary.44966b65.0","@material/ripple":"=8.0.0-canary.ad4df58c1.0","@material/rtl":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RHnOwxIFPnZLg7CrWiVaS6MLwadT2iIhfMgO71S4uISIUyhJs4soxuFWzfWLXgBq4fcQIptVKhXvTmcPM0ZS7Q==","shasum":"06fa181163ee6aeba8065702e731825d5dda805d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":61511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VNCRA9TVsSAnZWagAAzaYP/A6lTBZSgB6OdaNqRXzz\ng1u5lg8+KUjNCtJO8tnI7dUaGTFjQ9BdtlTflpQMOyHVNSxm+Fe/SpTic4nT\nIMsjDSIu2gutYrk5QQ/CEiavzQQU2pEKUlzY1pSdNJDpWVzzKXxeWtcGvPD4\nUnbW3qTsD9TZqP4OZ8YodLqnEgoMXT338h+F+naGIQ/WRqcnseZSNXMxbhwx\ncKLVl3pH1p1Qm8GW3M79QtDGjzc/yhq02jRKOV+xfHQTZzxKFofjCyrE8f8d\n/Ygf7DdgFHrLMN0zVtfxSes8JRMijmKIrhHQEyap4CPbnoOkLSuj4AJ8aY3N\nkvJqUgKqvzeUIyU/ArdluDXln9eGM5bIiCCejPWkcwQR3vCmGD8qKHUvb/2d\n8iCUEww7NOMZGvjtigVHVNS7ymAYEyBy+acGFpP2/deiyYNusXjiVAe890Kb\nsSYC50eNQa4gbrDlA//sxBrQ5Z6aQZPq6krMRkyR8jvRlqCDzGrUuOefS/6r\nCEgr8PKTj4Q+SedsLVZ+uTOXbPQz7rSGq7sAKW8iVIh0ZF9NIvE+LEhLs+dG\nF9ouN832PI5jJmA4r0DZ/TG30XMb5VroVJbzkGRE48KzOGTmfvdEmSKqQZ4J\nLLLuXnslSqiJHDM+Bo2NFi6hEPPcpRhDBeKK4ijRTgjI+vgfscH9DXHfot1V\nxSKm\r\n=jJwv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWGLi7d7lpI1TM4hHrXEDZKEhKNDtr/an5raMSgb5TsgIhAIj+vxdGvWVB708mAPo0+GN2DVcHXX63i+vBzhVehIXc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.44966b65.0_1594836300775_0.013215563973770106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.3ef0ef60.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.01db89053.0","@material/elevation":"=8.0.0-canary.01db89053.0","@material/fab":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-icon":"0.18.0-canary.3ef0ef60.0","@material/ripple":"=8.0.0-canary.01db89053.0","@material/rtl":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/color_ffffff.png) `#ffffff` | Foreground color of the label and icon.\n| `--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/fab/images/color_018786.png) `#018786` | Background color of the FAB.\n| `--mdc-fab-box-shadow`        | mdc elevation 6  | Sets the box shadow of the fab.\n| `--mdc-fab-box-shadow-hover`  | mdc elevation 8  | Sets the box shadow of the fab when focused or hovered.\n| `--mdc-fab-box-shadow-active` | mdc elevation 12 | Sets the box shadow of the fab when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+Yae+k9GFGJEMC6HeZAKSojs86h42PEDQb3J9mTq1ZmUuMZBW5Gxag7HInJK4wJpJ4pz7+o/oeGSl7EQA3b9DQ==","shasum":"e96bef0161df0c8d235ececd21b3ee2b52d4e7d8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":62195,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZWCRA9TVsSAnZWagAAE6oP/RTyAoSmYrQw4wJwdPKl\nSCCO08EdzXpaKN+sokdKIYOJiuADwjd3i8AmyCY3ltrwKZhERjo5SHbr+a09\nlMyQCmVEJHwq1VikxGN+Hdk/dR7InKNcs/JtUn/lwVTHZEThzc4burpP97R5\na+v+K34Zf1mAb+6W7r5WHM+8YsNYxfygn/wriO6pc5ps+m/x2AQAb8QjUQUr\nQIsnjHNiZuDXGNhOj4v/OuQnXLvhTxeuXhlQzwrdsanNpN4wRdE+ARPmNQpW\nsTvUSA7RlNquJpxUiLshrljcZLtp/TJRrA2973UYuK0iinW6Zvp78f/0OB8z\nQ45hjgdUAdCwQj+R3vaRX5UUdxMH1JarfdVKY6pGUD1ejMw+RnfVkvpbK9pP\n2Gd+wDbphQuNW5ZWJvdbvg2FK+jK2LDlCTgm8xJILdeYN9M290NCYjCvkIS9\nSZiQ3ZJpYffH9zMZ7cdKEdq0MQUPlcm020nzi62AmmDFBUKt0XsPiQDB1Rjp\nG5XP0iI/1kN+QF5TQfWUL2Cpm1yaVAL2nU7I8aLWwCWCVk6X5SNUAYJJ+pf5\nEAzFnelOT3VKMLYl2tx80ROx27PANUSZ81k36FU9HbH1CtSDsh+MwaZZi6iQ\nzwbju+kPbTLRsTpxDxd3yMbfI00lbLFOngRlzL2sdpgkAkn+mnmolA35Ns+H\nrFPe\r\n=HPnS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdJ9K9RC6YgmJ5df58Ke7yDeZqM0h5zIlROpTpD92wVAiATik2+rrDZR17Ylrb1bkEV3knWSD2cVULeAKY2guMHsA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.3ef0ef60.0_1594918486178_0.7065731364701604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.fcebf9e6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.01db89053.0","@material/elevation":"=8.0.0-canary.01db89053.0","@material/fab":"=8.0.0-canary.01db89053.0","@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-icon":"0.18.0-canary.fcebf9e6.0","@material/ripple":"=8.0.0-canary.01db89053.0","@material/rtl":"=8.0.0-canary.01db89053.0","@material/shape":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6ee8+5RJ0M3WIuuinlRf90G0PM1Xh707ky6uVgwJ5xRDc38erA2XFZA3riHbD50hrdOPGL3ogfb7T94SO3AjHA==","shasum":"a5d1c2ba44b979772d83ca51ab9b13aa69e63415","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.fcebf9e6.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZwCRA9TVsSAnZWagAAcH4P/jzkvZGR22T3AaHFBfYy\nHuSze6vS7+1J7hIiJT/mGzKGDZHIrUhTIZu5iKgcYx8rKF6E11rs1Wu4y4kl\n4Ag6k+lafpgATInzrSytyjjM4do+4wSp8o4up3Xku0AQXkg9iIcK23CUDAlF\n42+Pa5dxhmMd0rS3JoZh4tCYlefB/pyhMqYeAk5PZksvKa/vfjUFm5v6ffds\nqjtrilQCAvOC/YAVK5Ev7Y9fpW75JPs7TkY4li0sglQD6PEJYUuwasMAQ9Ga\nO+r3/raRrS2M4bE72g+Er4PZy3/4gMAMmuSfpaNhqRO36bP9QPXSSVv+PrIo\nQzkz4QYZUDG8LhUKTMmXZ273VpItqPMWnkUWCSjKH0/B40BzNtsuYDfmzlBr\nE89QJ/0Top6Kc6K01eXh9Vd+qof4BjyJrbUeAtQeM4wfy/7zomSOfiM193Ba\n8HHL8efGC/bOHj2qepGxL0RLoKXzSdekTSryxpZu08mO1U9vUIuIfJgU6KJ2\n07YADF/MJY9uDwoPwFsmBUtFXHxR7x9ViTXPGTVLFK42wqiFREhJitlTl05f\nz03aULdr4Q7OJ03a4JOm9geZIRcDcC5UyXJ7ANBiEsG1MbsNRBnxtk4bwlri\n61WAk65cXYxbb71AIswowBMCOjYB5AjWVn7Ol816cd1YG1KqRpMXaDr9LPPf\nk91m\r\n=XR81\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2oAFL1jF7j+HJKVKfeF8UdSv4oIxAuhtHs95FPJP3YAIgC2vIR4CE1FBQl+SokYw1xNfZ9/bSvXMllw+cg1INRn4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.fcebf9e6.0_1595270768065_0.69476842295273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.b6a772df.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.fb5a4cdeb.0","@material/elevation":"=8.0.0-canary.fb5a4cdeb.0","@material/fab":"=8.0.0-canary.fb5a4cdeb.0","@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-icon":"0.18.0-canary.b6a772df.0","@material/ripple":"=8.0.0-canary.fb5a4cdeb.0","@material/rtl":"=8.0.0-canary.fb5a4cdeb.0","@material/shape":"=8.0.0-canary.fb5a4cdeb.0","@material/theme":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-SkUirQPV9C+7/QGuBF3soOEil9dMwtW4/lmOI/ww5eWw8hMgtSzhAUeXv+fOcFHdyZcDNw6USOobwc7ngD/gXQ==","shasum":"caa99f5a00af34409e61e01968fa81ec2eb5b6a6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.b6a772df.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7MCRA9TVsSAnZWagAAXxQP/RFE5/kpGN6dGnVzw4Zs\n1A8UmvB8E31sTi8dsXb8sxAWllFiR6ZkXrtYpbcN5KF9BqTXPeJ9dRsEUKzy\nXdhQOn6beHi+xT3cASEy1etD/S1l+kOMjGFbb9TPE7RkNf6+d8yF80XJMAsp\niBkVZuipA/YFKIeBKqbtWCj4YkAcvvTtePD8FI/K7IW4m6usjJndFhYbUDY/\nZCYgME1uyfMO6oMQaBp24FHGX4YOWtOGn4bRZ13hjcOZWzBqes/vNFtrL+Ca\nr2cWr2Ijjt4uMIrNOJuZUt1HbFWdx6L1RDd0EcPXhirQvj+iuVht/ripLvfK\nmz4pv/7+AB9rBENBiLPfr7ZH4sBR27Ds5vxguRR8fCTqROKvjMDlzmn6DFPL\nkh4dWxpRY+Py4SxEK/l6d5g2iQrfYV8OvSqzFkHuKmGsJrwtmoGyB+pdnMrU\nxLaVbdXpZ0mAl0fQGsT7ADpo+AMAuMPOzkp9Q6gLs6H3ZI9SjBMlnPHRaJJ1\ng/nPrVwt5K2scv2jy7yutk1Kn1lJ6JlTkzmYNktgXa030blJ5YCONlIHLgtr\nH8BzufsWUwhojrTBwxv/eVS1AYcHiqlgnU0I5gFuzkVDD/Dj2pnJhlSjyAAK\nnR+TrM6/HtgopdNKkMaJ2utmzAuDbpsVjrTPKJCQyez37Ead6DY5aXv2rga8\nbAQK\r\n=pi4d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF+eybnIeb3RrTW4dKmDfNnWpUFhXLX1c/Z6FNexHmHHAiEA/YD0kWZbERzavpFkxelkNf8dWFUbsen9EZk9fGMtn4w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.b6a772df.0_1595285196446_0.540625712527306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.f6a6ca38.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/fab":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-icon":"0.18.0-canary.f6a6ca38.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/shape":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-h5F51x16t6dfbcD/JCwXVxlu94AUdQTjoBn357lbXux2hxs0d5rNJf00pPlp4J28ALvSSCftkoxOMqrSjQK/7A==","shasum":"c78a7dd3f558288741f00a1ff21a6a75428e7edb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.f6a6ca38.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqYCRA9TVsSAnZWagAAlzcQAKSA0H8czd77nPodN744\nJmZzerSyKeQuC8Clo9Yk3aZvfGKwjojs/erpTaDwexdiFsIVm75oa3kq2rrK\nfJQFH3cOhN5A/wRnJEWhGGrdcGcOz26ZY2pAH8rclVpNOa/QjnmD4xRewtBk\nb5g0njQTlA3+Yr3Hww+qDgzU0+q8oO5ZTFKel9IJ3wC3OwC6BvU6zN1hWS2O\n/mIIk8dlqQ6vKtzdL66GsnUPI+Qf8aH4vP3lDjymVePxZEl4fSwOJt4ZwVyB\n/Siq7DPP3+q9F4GSl+2uAmfCooL3ppFccuMStHJ/N2astQ/tIzLKyN2xoriq\nxyaMR8Uq27ok/xCWlBrbYrwIkIFa66kv3FYq3KWS1P84CYUzX52BxVL1kGmk\nylNFhSnQPCYrLa04ZHN0EbgUKOTCncZLW1/A67CM214ZuCfk4NKlWpR2lzee\n07+tvW7yy6vwWDrRXNZ4lFAgOtNqgcztVaGwwOPIx6qICY/TSyKxIeowewcX\n2gyVD0Rg8+U8y8guviIo7ebe0PeQJLF7/eCz1j2sAJcYpAV/aCSy64ZiTuwU\n7sRpyJKaFCyVeeKv3u6SOJOl++Sh/6bSEMORVWs7n/gmhJkdlOPOvlVJ1dzd\nyPInN3yJgAriGJEo0W58P4L0CgUSM3f3BO3LRRgoXAUeQAqDr0V8fuG5A5nf\nSuy0\r\n=/jwi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHw99MASLtJQtxb9BoJGfM7rILJ5MqRNEcO9NauJaqPoAiEAobyx8aI5gKWRUComOUJLjAv/tpFSiLCkrhhU6VlstsU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.f6a6ca38.0_1595349656442_0.1974958862884888"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.647dd6b7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/fab":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-icon":"0.18.0-canary.647dd6b7.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/shape":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Tp5L9ce8gswdIH1dkQSzfEe7IPqF/5h7cqOCARRoYDZbku5X/IrUj8BYKlB10MtN/orQXFKFc+nUidq63AaznA==","shasum":"25af42fa3d962cb5929ecb56c42ba3241a07a46f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.647dd6b7.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzdcCRA9TVsSAnZWagAAEx4P/Ridg0HiPDNFcW9EMGXC\n8hV5SWHFvB3iY10hBQvQOjkI/Pkpa+1Z/EWSVhVRiPF6y7qFQ1/NGesJqYFA\n004l7JDwIrqBkYgVgCfBhqxZhyo1jTcJX2LtrkaB4BL3wnvF8QbKq1IslWm9\nnR+/ukffBTBX7cCj0bAcMknrI1ruYfPUKWVv1EDD7ds3mNByp01/W6eHLoFH\nbwPjE/zzWRApXOQLCAl19OUqTVET7BjheNStS4rrWDfNulYFlM0AcheLNWFe\nBohoeAJWtzN2I6DOZdrhU3A3j4eykmwGyFh8kwY0hjFab8UjfDRLxxk2h+cq\nqV5Z+H2auzvFThbNO8Q9PTS9ulrtWR9CRdhAf5jLfgvSoTZCDh2Ty5zQ2mdD\nGtRJQ7c4YAdRnZfsA5+07RhEb5NrCtjxGz1x0oqhcFHy1vv48Bvq4o6JMQxH\ngMP8QorGypoLPCfqPERc8zXSqxZNxTLHReR0yWkNWV+QVhu2Nvcy9/YfQCg+\nPiLJN8aWSTxF/zdM/OD2VZ38zsJ+D6DN0lmHoORGF3a3TjTDgo+2uulttDzU\nSUtUTPzUM7/1aRoJSi4JdmlfrWVzqu7OHozjrb5kRMZy6XqV+3srxEyxog37\niCWFInO8RlVREHx53B1cRpCxGG1HZ7/chaBhNhLlcT7hY0FnFYixe5w3Y1ah\nZsT6\r\n=dxJV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRxTGtE4DcVxydmAmDJS/wKzTDF7J0PoRIoTbpRVWTrAiEA2tARAordsasDCc7zk1DB7lvhBoimG9ARdBG+zaWkzbk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.647dd6b7.0_1595357019636_0.329866664622237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.3cb7406f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/fab":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-icon":"0.18.0-canary.3cb7406f.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/shape":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-X66AHfgDf381Cme2zzRypLsBwt50luVW7VBXXqZc3+usIQmcBTFnG7bRXoAtptQDC7Ld1D1pxyoYaunS32pS3w==","shasum":"122aad48ecc43e42e538198e6165a63b11d9e2da","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.3cb7406f.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwiCRA9TVsSAnZWagAAF9kP/2tqvrXNo+uXrqTMFEz0\nMgFL02paTW0Rz6uJ039t1UinDiMgbrwp/+ktXrB0mVomcEH0nhFFnV68/NMb\nEI4gQdA2qC/LZKzOAXPyXVrbEmX0B3EFzkmP34JC9bMPUdgDy9yPVxzdQe2c\n7VfRLFhlPhZjZPCbXtrl3sScIskdILPPFvTaYakBmAQWLw8HvE3fQoqeKY3H\nYlvwShy/hdZbT5cqlAH9Cu6cffw8FvfZoOs1ICcWCiW2gY38flzYmLeeI5Vk\nPWxbhfF5ef8GwYKFWBtmNo7uS1rrL5RZZsCUNjp38PRakKdkqWzkKsWudXOk\nsdUxwK+ljpUOSZM114AdDkX/nVTguTmuqbiYFuCRGnQVntVjNvJnRuaHgYqm\n5NTS4TKLOoNqE3t/4cx4AOcBdfgZ1kU/dABWc+vium6l2dn1HQciXv0IYOpB\njsLEPKkTs6baf108WdO3ORO4Lavh2bhiPNOI5ZNbgS7zDybsh1t1GH2UI/17\n2QyXboxX8rjX4HDoNkwsaywAg3sa/6b+J4tvs5lXYvr3OjWgZAP9jrJyjVXV\n5oKrOEWoDRV3vACwmxM4TErbhlUkcGVC9wVzKWDCDpSBOL9qQB9cZvkhHXEN\ncJLQMUfrsZrAVYLyjYVJntYVix54PC1NR350QRKUKccfz8dCgf6LfUVG1FIz\nj9HE\r\n=FdgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+GLnuLQEN5K8N1Q6SsiRinRFHj7KFcNG7x6+Vtke4pgIgKRoV5QsuagpCybjXt8XtkJluU2fUpBaPqF65VS7o3ng="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.3cb7406f.0_1595444255944_0.02918257372332067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.5717a5a1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/fab":"=8.0.0-canary.abcdbcfeb.0","@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-icon":"0.18.0-canary.5717a5a1.0","@material/ripple":"=8.0.0-canary.abcdbcfeb.0","@material/rtl":"=8.0.0-canary.abcdbcfeb.0","@material/shape":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-k2V8IJKcpHqHLce6XvFjuzHbxZX88Mu7puwn5UEAdvyP3XjUh6y2/7+iFH3x9hYWc5ASOiDomrVLBFKRvl3TRw==","shasum":"bb5135ec1b617993f2a8d320166db7c3b4840a52","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.5717a5a1.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLIvCRA9TVsSAnZWagAA+cUP/RSKEi3nBGOFNM2/zNYf\nPYp/JcubTKMgdC1xK2iVe63jFVKsyBH4/kN44WdTuw1/c1Ttkpemi0qEOl3v\nOn69NVp0cY7JOPgLgUIPsjGQiLWa2ncNHmjvT1Dc7SVQ7eGc5mrW6xU5glsr\nENlwJnX1cJpCded7XZwd16Tpm9QZed5O2vk+13RjA4QukQscAmZxC/xxbMjP\n69mFM/aIaoY4Vkr+WfpHRS36LP8OzZFdmFFWtro7LAFq995EFukQIzYo9m0G\nXnCDrmB6kwdOoAAl/kyjazfKMWWwLpjj3Ox7hIpacFaHXCHgvrxHolhQYvWn\nuDwEnAJyjkw5Q0bw4c+tIgwKJz1ZdNzpmyGPAKX25k2kUKprA3ScHL0fgXkO\nQpGVQGgR7fu3n5a78n15FYDRUnrJwjykzdGUWa7nPwyeAOFZ7bz2udHOxXOF\np3PA+TBxeO2wZdB7GpjderphzxbnruKLLtKmURdIGUObvUny5qHu+Flc1oki\nTVilncSeV7ohoJFgO0/sL7MV9GJT8eHc9y24qqbn8jhKxtwaVIMTweX8nLuk\nN+mz7s2JQg18HILNaAzhgwn4SXiRZQHZ+fRMxD+NoVZkM7yey4f+sWhvFdMa\nG13Vi9NLQyS3lQi6r33OoR9GQgD0XqwhHHuwBQKQsEKUFbvtDe01ogPByGr2\n1aH7\r\n=Yw1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnagTIycFOrl74cRpe4aFoW6P+1Mw8dNBdsMhii7CEEwIgXY9+t7lczcD4lZeXVo+rK6JlndasAyaAFxGM6C6alMo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.5717a5a1.0_1595453998713_0.992444777905676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.d84cd4b2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-icon":"0.18.0-canary.d84cd4b2.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2P7kcFvwpvpeZ9cJQwIn8m7Eutj46Ts6+s1QWn7hldIF5e6t2zVXzlQR518LJOknlnIPy7jK/FQgE51sqsO2AQ==","shasum":"964469a5784e879d96c0f53a6aab69ac607b85da","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.d84cd4b2.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKnCRA9TVsSAnZWagAA+t0P/ikuewsh4kU17cdfUbDf\nKwQ0CbJvd8CO+Wcx8htMtShIPrepx6KotMGMB6L4Oh/CQ/0Wraq6eDbx7/OM\nXRq4i6C5MftMLh/J2YMk/eaZTzMqMcFxobN9+46ZsXR5nz5ZIOWSicocKaCn\nh1FLPcNz3TLpkp6PBO/EQThQkPkPia0MMZ5Wo3NbvG/GyuujLL3zEJbLhqIG\nAZGIVZce/+n5l+p3UBr1PyWbb0T34MoLnz6VOcueM78TeCLk3ZrnA6U730q5\nXALjYJVCZ1Iw4KnMuRYPsffmzmk1uZ0ghEDSdHk3xySFxajKWPofIpdcUSB1\nrtuIrzDHv/sLPGTwR3poM/rDRFaAmRd0wUywDXm6G2C7T61RhqryZQUcIyqF\npOnue5KF0YGRAAzKXtooiw04zIjK0sbyIf7LwRgPUPeGQvJJ81HfejLflC3N\nktxThNWjewFxXe49uBoTeJGzfX4TSgR1MJ3Q5jYu0GFyoeJ728wnbK5zh92P\nk6ybrnV79XGac64uH7r4qeEwutqOrwGFzE2ZQGPBe0ReGfFuDUCS9ArDWHRh\n/RadUz1lWgehDzqYx5y+SUPkD0ytEMb/E8O79sEtCd+I98Q7CuPkrTS/WFO7\njnF46HriUXpLRty5Jqt9E2YaAQoGcBl+tV0kIBOljBWu78IGYH3oXh73bOSo\nj4eC\r\n=rsCe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCyL+JVtMM/5383QgmhTHas2JINpYrd5C3vpihKnVrtAiEAzjblrs5mtiQq+NRD0SpJXg+wIQfbSFIwMXlcKGMAxRE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.d84cd4b2.0_1595454118968_0.5945447966884314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.f279e7fc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-icon":"0.18.0-canary.f279e7fc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IsDCnqKrLD3uEqboErvq+F0S6wVlk/k3eZpxHG66bIEKtPUOE24fXUi6Nz+3FZSMeA44RDzw3IHmMq4jGSYUAA==","shasum":"8bc5454ffad246e09cc9385510c933a42b37f73e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.f279e7fc.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcJCRA9TVsSAnZWagAAiWYP/AsIY2zOUcs/T3dZWv7f\nDugTf30E0nLv7Dkt1mdGxu+oOV95fVd4Rurqk4/U1QHoBOXiRbrobjGWDWvm\nQ7Vevw9Gy/l3GL6rhsXHKh+KFRvQh+LVtrJTTT+wSwMpwZkit9PMIhYi+IJR\nCzznqmjVWDHHXQxWPSDmJH0JfDiwP9voJ5reC97N8wbOx6x+bTXIU1LNCOLX\negXQpOF1ofLdHtOvZx2wiznqt4Jf5SpXxWHJXHF+gGv1jn1cGYuUjCDXWsFX\ntF6Vq3aVfsg26qKR4pgcRwkmOhCwTPfIx1mHn2fsbOfhk3zUCuaI2oZKd16A\nTktKKPPoOIX0ycuRDKbLfYqU2oFuT8W570nxbLRV/+sk+1PekXNm4StwzluJ\nrF48DYh18sznDJqdkBdGjY8n/0etw+meQyZAI1tYAlBdzSP10VA4smTXLu4i\n1XtsYQzTNfUQS0JnLbiOPdMq3/YK7yW5d2M59d0GWHk8IwnhGr630yi1TaRK\nsq7ISkP1tLcXl63sqRpvyldIaNGKfFWFCU08Zs4h7/0EamlffD/4fNWrOn2a\nmP4h8wg2hzEsSXBXfORsLlqTOQH3wDCidV6iY7GQI/w9MQ620ok4O2Y/TntC\nG5sJiZOzj43ceTMQCXfnr8/QI+N/mODsMWYLm726gQQx/YqVJFRFFpmbxLvZ\naXBY\r\n=gsKb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQmr5OJOy+VSH4V2lq2lZaiRV+53LQ4oxeyuDvXO9yogIhAIfHcVhZrQ+qk3SkfPfgbkYxhOX52KwjIAGR6+Qj4hTI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.f279e7fc.0_1595455241182_0.7314100092212847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.f181e3bc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-icon":"0.18.0-canary.f181e3bc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-bPj7D5yN+unn/cPomOQATsP81TAAHoQkTMmr06+9bfP0P+sYP8b0tREbp7QgZ8jVWxFe6hP0Et+KIWDOBdC5Sg==","shasum":"eea00a1ea7521ca1bfb48fea57ab5ea230c83e64","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.f181e3bc.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeGCRA9TVsSAnZWagAAXpsP/2/NyDh6JxW/QZADJ0oP\noQQoCOWrHdj1jl6WCCjOunmA/r5gnCCB9Rvvl1Ip3UA+7SYaEb7nu4mhRtqR\ny/at1hSOBdH4H+8SwVFofma11a84UQk4+zHFYSc9y07Ke7+D5q6C6YHZHDzU\nfYgTYIA25INbTi+r4igW9iTHWtOZoH78vNclVlBoEI5S130yLzc5d5MRkTvF\nfJeXKnaSB3AP1GY+gEyo3qnwettdjy9jRW9Z3SRxsjVkrn2AZ7WgpDwH01JP\nljH1nrl3OyBodIaFEI+IuQeSw7yQGMHnyHCi5gdUoXHx/KeLVSEju6Vzpcor\nHWqru5TRaGYXokrutRDEWNI+Kb6xfewZdxLPjpdAmHs8LiJWtgaidNLwFCC+\nYVJEhIh0qXIUAiFz1+OWBMASsVlHUoEV0OFXGaUPN7MUgtRLEZ7vvMsSGPna\noAQt6WHstKjPOxd+exJuAO5Fuu6bhCH/gU5UUJeMclFqIzo5PE6SVsVRkH3s\nRqsELs9Ji6N4DLeF/6xBqwi28sgB+52iwXmiIcavswZvf0KIwxnHys2NW2OG\n82x58r3mV/pfKnVQTDBPkcB3laZ01bUd8c7BlUSLR/YJa5CeNc2I5GD5kNKa\nGwLbE9EquzGeKoZSAiMVYa9IRExJYxGaaRICZyopXx6QGVqdtgGu125nCiPT\nTHtu\r\n=B0L4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBS8KduvSfMNnqYcl1BIvra+EzI8mOKm6M/Oj88nyWVxAiAhM7spBShzZOicZpnu8IDU/o9oCJKwebAe0cMz6o5TRQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.f181e3bc.0_1595455365691_0.17673447745059767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.346a622a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-icon":"0.18.0-canary.346a622a.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nL3hRK93tr7YNnpo7zTZAlBMzH2JKHqKdwrGmUL8rxLs1wRkQ4BqnyMU8Ffji5gMeXvIzQjBgsGUeA89uhFNCw==","shasum":"bb3ebc999628775c4b3d0f7b9c2a3cf64c1652c3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.346a622a.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5TCRA9TVsSAnZWagAAOJEP/RXYrGPBLOVOjMxLx1Gm\nhHvnzhVuTM/pBesely9bLNpIa70b/4Y5i9CT2q9sNofKNh7psLxqHp8jlCZR\nvdx3vJllulk1zfEeFiPl9Rf5X/KofTyqUx5fF+veQosnNGknlLXxvz02Uff0\n6ylpqEodqBFP56V0HULrbNEFqaqrtqvn2ZAqNlVh1e446pl+XQuAnXpfbC6H\nCEOXzRx/1fk6ZeHkIFHWfPdH+sQMPj/w3FSwC3e8miNh5BO90k6bAUzOMRi8\nVpgFr3gXwXygCREgGVB1NWmG4W30ZXQKL6SDFS+FfdbnICdqGz6EbXFt4vhU\nMrq9x9bVp49V337QEOJdsz1VjmQKSXR1JVfuEhKHF16F4lG8keGOf3VQugwc\ngCjn84tAerdcrco2hCBIwMSVCRCDhCY3OdegedEDlx1a5K1y/ROnaXhqSlrU\nVVgMvD0dMyBtL2iaTQC+CID4x6wG/qDqTQu4cmapodWIidiTXKLt36qPP4bM\nHelwRifAMJAI71Z8LNdJ2xJaGsHaLDuhC2o6Zb79ngyU/FV4pkD2B5ynK4wk\nJB6PDARrZmXkJcJli9IgqA/JWRsNwm1WIY4TnYAUCI0Ohndcji3j+ZreLFM1\nb7evLSj+7F7/KasMSH5l/VZT/rF8e+UH8aTiE0rcwu6sxZ859M+x0L5V9uCS\n2B18\r\n=1M+J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBnhr0osS5Docl/Z9RYXZPYGaE57KFsPbJS8XUZAsez5AiEA+dLNgRhwIe4dqMB6rfKJ4dNnBkGJmEXlMF/G01cPpJI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.346a622a.0_1595461201470_0.9242316183229837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.c9e8a848.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-icon":"0.18.0-canary.c9e8a848.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JEz0SFBP7J3/t4+TldzTcW506RgXDVJCgeGpsjVL8EfaN/4m7IS8Yfa2LnBnaiX4hKqN4Sn6qmgVavez9r/XUg==","shasum":"4df04533be8655e9418a54d29c3ca5417017ad41","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.c9e8a848.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOFCRA9TVsSAnZWagAAYJgP/3lJMKvm5IcXJ41um6ox\n9+UTKmNYZW4WRffa912YPBtvAgN4tT+PS61vDVPWvuJFaVp97IKmBBU/PsY9\nWk8dBNNdznCzQX8O3OrccYQvrBFpnSllPwBBnsG8LdRYkWo192Y5YGOwysjh\nhss0On4M8Dft9rAIGteK0PG/P09i71nXM1UutTqzcu4bGjukLSu9YCMZAOOO\nLLxX6NcgQ4zLRQuBB3/KTA+OOFa2k5hNG+wWs+LHnEqeZ4egY/b1pXauzaE3\nrs7BHz048XLRUYBctw8+TWECSHhLW5v1GY7gg83dS5rih/j2bLny9Lam5aBz\nIrtzYxn9LYM+nXja/P/c3RvxwVsDQ/DWz/bjmkABdhx6DHy4JKMsWtyt9KAT\n3UUnmr2utwatNK8b1YUFhIfNrTbY2/9GpX28TWrwzUdHTaC4AZTNbu7I2W+s\nELUTWTaPRGXrmdDCaUabr/TXmq1H3KOrGH818mRpXGPD1WdOAzh+vqNYgnPm\nQ84T6VQEH5jVmsT1Q2oXZaALyliVDKmOi4ByMPcdkj3SOVYPFLqwGZvMWqy2\nojAddfxHGAZf2SSMENtcqlX4TK29r0oqvzj6MZMVDm+8ikuXQLvANahwzqag\npr5C4Bvx5jlsjYt7Fhbm8J8ZjZwiczRb6HdTe+cIPtvxqii1Mxw9JaCg8VJU\nsGCQ\r\n=XGN8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBppiPgferPeJ+DGI+AyNJA2NlArZgoPJI2H4zkzw37SAiEA2DmeoXrJtUdaQbs5HHy6XvQcfQ9Qo0IJ0Mr4y2CtoGQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.c9e8a848.0_1595466629387_0.6842396545691429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.718c385c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-icon":"0.18.0-canary.718c385c.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+FesYNltQPUFkOlkcLYzDa09aKx9vq+zsWaU63tKuL+2Aknmg28ba3obJ6mwwO1G9Tqw3Zkc2FAzW2agBcd9Ig==","shasum":"aedc1dc59fd47eb09d08c40648381beb56099102","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.718c385c.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3LCRA9TVsSAnZWagAANGwP/i97pkNyMl5ACZEQa/6m\nFBb218di4zcXdtjiLtmHlTXgK915v3daDpj8emtVg/Hru9Db4FKLItaMJkpc\niZ8O0IP7yuqcap8fUi2lkOVFUVYjI4mGwZjZxIzVVjlnb+TaNpNJ35JK/8Uq\nZArq7vHZbqbbkUNfrpmPXqsJ7LIjezw7dVpGyApCk/d0VO9DnX3BI5fCrjcN\nN4SwYPP5Kk9Go67/KFBEGEGreABQa6oYxUs5W/0agO3ZW5/2ZQxB3KHVBEmO\nJEIX6Vm4AU0rQS7BxZT4nd1Gs54lS+NAncYp1wLf9g2CaArRO7K2GJBhAQaH\ndF87UKePP7JODGiOOIjrBME1Tcg/k/DCiTXyJoDr3mwKVN+CKDo13J8hFE8J\nRq8zoGor09q3gGgQJEbrP7ISr6tHhiMh9cfGd+/jJJi3/XcthRuLA1280dkp\n/kdncbfPf1zY0JlVh3bZdGlINI0MlsBWMIuLXW9oz5Gj2Y737yViLZl0J6BT\nQHfnUVhHZLFy1s6fuoFnEcKjPFUMTsXlHAMTqNqGq41jp1VF5usQL299cxcP\nFhOkOC06VspKDPxNrSrvCRATHwnhpyAjG72Vw0bbY7VPoSD0uK/UZPjjUGVf\nw96QhyoBn3OggdlSP4VWoDETWwerTBYorGtGh2zBM2Bfh3yvaNi9Al5XAiq+\nawbT\r\n=7hGt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpjte18RWohgxUAzHoFqP9IjFXG9ASlpJ5sdBWazwsPAiBsRj0vvhYnRtBGw6jhEnFbEibg7Q5kbTMmNQ8gxt+73w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.718c385c.0_1595534795151_0.34435589659248533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.cd516a27.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-icon":"0.18.0-canary.cd516a27.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-g0WHtUXfi1nSLvVjtM07xiH0XuetITk0cwawLoQrP1vZlPOmWMvcX1t4bWsU88BxsDrsCZASm0a3z/0E+oq2Mg==","shasum":"190e25f0dd6306d6f2e223098a8d6095796d93a6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.cd516a27.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJBCRA9TVsSAnZWagAAmJ0P/i37t39HasW+RzKaAhpY\n6kG37/O0VO601MctAsLo1375n9Qk9jd+fjGsR/ueMZs9jjf4o1ykaJpUMK9z\n+CdgCj1+acQvaSpk7RodaFTat42YYTxzS/Jfu3xZ5Og+Xwdrcee5zg6lFvYp\nOqN6NakFO5RRXevJDN0sphLHfulBoqtniIZSjFL8JD8zem7OC4It4uLpKz/b\nym4xy/TuEVZ3y0YvRj7m8zgT7e5yFEcyjniCYet8/pCbS6CR97cuAhF7L+nm\nRuP9Zz7me3xzTMLvATgyLbw8+qPigrXiAw2V7vsF5c69uel6tgHHeTJ7HH28\nVr77416Kg/4g7K/1wsIie9XT+9H7XVu6pSK+2Porlegh0uktOv1Ig4ExOcMl\ncwJ1YX/dlPLGhoutCrPeXRbrFbU54HrwXHnizjeKWeO5YIv2iz4TU0d6bTnp\n8giprdSiwxhGH2WrsjG+EGRqv4LPE8nU8hkmb+bZdtN7Hdi8tXmUYiGCdrju\nEc0qX2N51uyj59FiGteoRFwCfhSo0mB00l7qs5sU+JCravh+HnAY6eqCLnV5\nzeCTIOtQEFIJfrghJwX9TxPfBxnSG6TGhtrd2OwMUnhzvzf5lK2UYta7sH3o\nc/oWCTO0mhyquroCSConjiylyQUOWQtekb/bQUtc51LA7y2vn32eXz6RUt2/\npl8v\r\n=6T/I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+RfOZcun8d6SHjLHjnBrRkcAHyTn0LVzFsuR+EDIivwIhAM5s9Dv4H3eoY240Zx98qh2bDEjU4cm9BBNFOvgKsEUw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.cd516a27.0_1595617856587_0.09235888052631713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.1f082191.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-icon":"0.18.0-canary.1f082191.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tT+eSK4n0AS+SiT6V6CppH0KMBc49Hpl+axESoXRmZpIU5TkG2Kw11qp2EJoCiEHxSJI/Ol4RIfA7Da4IEMfRg==","shasum":"dd434b579cbc624fd3b4460a03ba818bfb9bc687","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.1f082191.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzN9CRA9TVsSAnZWagAA8wEP+waepYpYd1ZLU0c2b2ye\nHS8IqsIQYsj8njfYJWGetxpuAHJuGlME3tTlRtYnyYkpBxERiLqPMEoZNJQg\n+YWW9R62GyTVuSHFRanWJpQrSHM/kTy01FteN+mOcbGIdEgMBuFR2ZkoWRQp\nhFewABEWQJ6Xn2JqFU66b96njN7+ljTx8Zh6i9r7QAcGo7gcajzlijtvTFsr\ngRWqFOhs74DY93ZxL8qDeLyAoQGd1eap8DnUgZqHwbVzWQramtWLCYyCJpiu\ntJ0dIHu3QLlTfmYK2QnYRieXHDDTVNvUkmwCoa1XiGzGdBN9aHGlFpsw4M4c\nqEBzqKRSbW+nrnSWCRn4CxeQCPn4QKZoC2qmUg6YJ+IJtnxi5S4ZhevUFr3F\n+8Yh+56/2nbNi+rO2hb2o/GOdmKa8oNwtHRVNKNVnGPWstmRx4bz6KMKAUmi\ntWHrisz1F7aDaMaZrVLEnHnFCMUXPbKAdRGh+Gn8n3xhD0QwqaF60giL6GNw\nZ1FuiHNPl8lJ70S4tRPPIiS9+yxWKqZuaDaH+ICdoRFHBnkR27oTGvahIr23\nq2SiJHPhddbhLrNqFWxF8ChM6umqeSk8Ha1wIJ/iZ78tlbcvcpgcv9i1WS+i\nBOu5lusiqybyG96dI7yXVbA05eJigGwvF2y3Gpms0SkvmMFrPnxWSFrDyygM\nMelj\r\n=owKY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8x1KoALxxk5r8KcUDiyFJabHobrd1VDUt1QnewRHP1AiBkN8BcD9Yk6HWNoXVGrQZeqSIQi8MZImZ5N8n2ZuxVVg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.1f082191.0_1595618173546_0.9164854391926207"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.ea3e82dc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/fab":"=8.0.0-canary.7bd5075de.0","@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-icon":"0.18.0-canary.ea3e82dc.0","@material/ripple":"=8.0.0-canary.7bd5075de.0","@material/rtl":"=8.0.0-canary.7bd5075de.0","@material/shape":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TX9XErIR0LbFExbVTzY+jIa/dKVFR8aUgZwIXjHRh/OIsuJoVyrB3IwpdTeSauXa/h9/ocTrh/Zs8GUCKJqcsA==","shasum":"f9fe8826b87bf1a9cf08e95635cdfe967df3d507","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.ea3e82dc.0.tgz","fileCount":19,"unpackedSize":78569,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzS0CRA9TVsSAnZWagAARhQP/i0Eop63o621dYTPWr/A\nFsKmQKPDYmpJEP0pNLneI0mfArLVCZ/lYrmrms3SRTVi0ow7bjlUxcvQ4v1H\nKsJv263I14F4A/44rIV15z/JCMrRIIVRhKE0PSd1ksSGjArJY3ElYj06uTL5\nQbnQGUJxel06ocQTu2k7iXMfyzzO+zHt30hF9OrGt8ypz9sZ6UiXgiNSScaw\nx/xExH7/sbxpieJghqcnI5rDAqyiTLbf6+hci1nHiPFPCoT8kFI2INnRZAtY\nmXO4EJoA3XKGz5Au7Rwh895DUPwLNO/5XugUX6WFw/18EBDZceUG7/PIWokU\n3+nQJNFjZjlAN0/F4eugYW6e7t5lQMOcu9C5+N6HmCBXeAsW0Jo5PkluJdOo\n/t7V0nPbcA7Mpb2VojFiLpiBIApXWw6FET+PPAF7dUm+F6DdQQt5IErDZSAw\nQ04sR5w7Gj+M6lwc7grtyRISIMoYMc51EAlyyMiQniB8u4zoVtrHZGq8JWtX\nRkfySW9lggf+da3BZLI9sKr4KOZd1GpTXlMuNqIZMlDhtTD3EjzOYYQTmUGR\n6YC8kTnrd48nH4WRS7rLRofTw7N+nenZOBNQlWi14a/4mjYsDEUSmyK1uXag\n+9xobo9hK6jcTC0l7ljflXXtjq6vHuxDiLxdlPw9S4ae1fS+Za/OKML9+HOP\nLYeC\r\n=8tph\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSAsFagHa0XYldZvWp0fszOfz2KN77nrQjCM9vUTOpXAiEAuux5m+zQKkLqrDIkCHa+V9rbyawvaFqqvqRU0K3Orc0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.ea3e82dc.0_1595618483874_0.5035641027521096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.94987b64.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.5511e0aeb.0","@material/elevation":"=8.0.0-canary.5511e0aeb.0","@material/fab":"=8.0.0-canary.5511e0aeb.0","@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-icon":"0.18.0-canary.94987b64.0","@material/ripple":"=8.0.0-canary.5511e0aeb.0","@material/rtl":"=8.0.0-canary.5511e0aeb.0","@material/shape":"=8.0.0-canary.5511e0aeb.0","@material/theme":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-AJ5LWu3nA2xxVj6vB19pGMIwmdT6YWJu46Nrv1bYCLgerz7a23NPmEyMyoAczh8LqRpl7yLumfHrojaqHJXBHA==","shasum":"a89bb41809fab4e1e50ddffe953ba413461b9b65","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.94987b64.0.tgz","fileCount":19,"unpackedSize":78887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0P7CRA9TVsSAnZWagAADfMP/2CGxqdlxvv4jOy5YeXf\nnPtFevDdK7YD5Y+Ls4W3+j1hi70M5OMpBhoFC7wAs3cw8EeV+k8YYP76JN3h\nk3gaSn3Fi+5tYUyru7d+6VsAQkx6AOnsKEE6Qq3C4zfxs1KfzOiY9INNfwUy\n6ySPSjE+uNlJuzjP5mD88IqB25/l4zNNgCAzsB79QW7V8NMCJn74FoSjDglt\ncPpeJbDZFCaobVukNJ52SOKtaSAD51QQtGKZHfXUkegpkdDh+4CASRqqA96R\nUYMGR1Qr2ZUqDYrKGhxseMSPIRu+PJaWm8Jg8kUhkUXFxGRyXslkjJ6rqW+S\ngUeKe5cAduqlmWQZQUoal57NCybBnJkfVhgTMs/L1doJozbYsaPgW4md+gvj\niX5Vbu+XyyGjuDN+Ge//MvMktzCbKsSmXhtCp8PmJYGzoCVHf5xypqU8khrx\n9+3o0Xv1VPhYUOsMQZ/50AlBFJq/vvt94SKTSPlX14+FQk4+ilAN1F8+p5IN\n6nhzBMhBX85vSE5tvniWPyLsMKKUztBuCyhHaGTfNJy3eU73p3TabZYycref\n3Mx5f2xRWxJQCVokMpEnfBLThJaGQoaXZUxHyKptzh7IZatOnbpBxmgQLYqw\n3aDzPPMm2ZMEcfynstK2yynQWNAbSHcmdG+FwZx7DuJHjt8hS+sFAbxWT85P\nzuCl\r\n=rXLZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUms/VBPLGI67Ubqz1MKv81D24RcaPVT9eSfAnks6OIAiA1fz0z7nsibEOLY5f+s3hYz510R6kmZn72ZY0tEVLTOw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.94987b64.0_1595622395409_0.17424829817933274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.ff49b7e2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.ac405eae1.0","@material/elevation":"=8.0.0-canary.ac405eae1.0","@material/fab":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-icon":"0.18.0-canary.ff49b7e2.0","@material/ripple":"=8.0.0-canary.ac405eae1.0","@material/rtl":"=8.0.0-canary.ac405eae1.0","@material/shape":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZW2UqgzOe6ST2fR0WJKbxFWh4MDTqnZKgOs8TTLOBwPKLcJvx1Ihg6IIZ/8CeEuZe69GFNZsYsg4NQjFhQhfLw==","shasum":"6d5b4dd307372c66dff3c59c5f584dd548c6266c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.ff49b7e2.0.tgz","fileCount":19,"unpackedSize":78887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVWCRA9TVsSAnZWagAArcgP/iMBcAu8uY7aI/4ViMdy\ncAvKUYUJdbTMmmX0L3oCZRUL6tu2aBi48JT4pD9Aaolc8eIZx9kG62NFfPzm\nmbrMvJXRabaXdNTNDgLqSbA5+p5EEB++OkEDChLoTN01+ba7lT97tNc7nEdL\nyvot4IpIiOmUXU/LATfH/k3zyE2GJd/fr/7sd2LOOu52ZhePbleJLpoaQfzL\nqv/xeeAaq/xweTmQ7kOaYpWmWLaqH/6UdEU4NhSyZIpUPh43qf5VffPGFMS0\n2kNavcLOVPmTWBpKT1+z7uYXTwO8dRC084wyi4P4/29tH/WfJbjTb3WSfqkw\ndjTXcaM5kyqKEwceoeHSQHu6JWPq6VXMGJyze0Cl4cRARFNemexwhrgjfLts\nS1BOM5zf28QKpQws41NJoaGslM8X+gwjT4/5cyMnbC8jv80O5ZkqHpita8e2\nhOOzyxzFnzYHH0GmrKn1SSWMXRKBTJMg+Lv1P3sepvHW5oJ1dzvS7Jl4/QOt\n06tZCY1oAgrh9lhb+VVxmwEf6mo4It4/N7SQCv6OtzhF/PhVgQIRj8KlOlq/\nmcD3y51rVNR6SuaPmgSFy6ChNiI4KBmtGODDAgDFSYiSfYrISc06gm9ZLpgW\nb4w8MXZM43XBF6ltZeKv5pbVln/LGApC1n0iwSzBj/GCdm8D+nNRi1usocPk\nua6M\r\n=mFqr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA1VS52OzaXw3eGfRCBc0ovuTUX8t7q4m1Iy8BkMFvNRAiEA5jyw/JP7pDuvnR7IPnwS1KJGApXTTe1C44LEhC+DiZ4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.ff49b7e2.0_1595876694494_0.5223754574059791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.3d334ccc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.ac405eae1.0","@material/elevation":"=8.0.0-canary.ac405eae1.0","@material/fab":"=8.0.0-canary.ac405eae1.0","@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-icon":"0.18.0-canary.3d334ccc.0","@material/ripple":"=8.0.0-canary.ac405eae1.0","@material/rtl":"=8.0.0-canary.ac405eae1.0","@material/shape":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-g5DqZdGEVwZA2gwJlKiIO/+vGr+fzpw68qoJGAPAPoxS7xIGBUyC5/xzZDWX+EGGh67zH+v92SF3AjBcuh+kkA==","shasum":"02f47f14b8187c1170dd69399b1ec6d563bdb38b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.3d334ccc.0.tgz","fileCount":19,"unpackedSize":78887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8WCRA9TVsSAnZWagAAbq0P/1qp4uMBcdl3WFUoq4Y0\n3oTpIVrBB4uavrMQ3rbzP8kMyH7H+Mq1v4a6CDkJJ6qi2pjIe7WtqHD5Gh53\nQMF2qRkEMC80N7iEWsUfVCHJ4+WU5iHO7Tmjhow6nie8rJsy3j2UqDiS6yZe\nDdRFiXOfLMquJS2yjpKhmAvYX2l9/TzZJb2MHL9okSNqdXSaRmFyUc26xgp/\nqFFr6RVNyTFe366E+Zb3ROh3mKBA90Ayb9UJJC3ldb4LlRrJDBVw+ebfflod\nqMpTX0Fn5GeJM2NDVWG/etRybAaN1i2nSJFEXh5dAEFE2BptfxMJyWTUTRzn\nfQMD/cd/BExM87W7dG79KheCQ2ETycGBpPmMvLTYA20SrWIA9dRCb0+3BQXb\nbHKBfko7XB/ZoMiThjh56VTZLmCF1Y6eRpqQB8QDzI+3sh9Azk6SMWx8bJ7e\nC8+ZbxXAIlbKtN/KifyxZEq7ShvX6c9fLRso2uM/62MVLdo3N/KVvCsEtjD7\n1QVCo0sT7ZMbM4Ldbit+auiJN4BEL0azk1FBJ3QJaJmjEy4p0PPFbXCEuINZ\nNVskOvNd4R005CVstvDEcN987O7z2MCkbYulPw8yxgiU7oo4wKhGJJ8wXFBK\n2HTRTK0mjujJssVuKeBthISrap02HRv89SnuusVSzh5I/QLg46cYsAqidu/i\nr0Mx\r\n=y6SB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcWHuNQ9U+Jcz8blijUCTKGQGwnmpk8hoHGnN5/jSnkgIgSlAehGFJzDefVfzRv+Lki9GLEhgAH43mckAZZLD1qLc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.3d334ccc.0_1595952918198_0.28303557134717794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.82ac569e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/fab":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-icon":"0.18.0-canary.82ac569e.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hvD/rS5a2dwZ/Qt2v3JQsLZVGicbOnHAvJPE81cpdklIsio8p6EJjfA44OKTZU/wLXAnk2KgYuLwKgv/Y+mfiQ==","shasum":"facb6a120f755e35dfab565f7b2d96a669d26cf5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.82ac569e.0.tgz","fileCount":19,"unpackedSize":78887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGXCRA9TVsSAnZWagAAxiYP/AvamGBzmjeQ4UzFss8i\nxxqeYOpae86KkujM6gJD0ohebTXqIFR4nWxGvEPG1VwsL/hP2myhqFjCwXaU\nqq4d06W2uFRYDXddQabpG4jVoMU6tuakMbvFfTzxS+wfJy8JULY9x7ifKNM1\n0A88VUA1b4jH30PTLMbGcYyW+em5wS0B0OMQtKtO0CCMQeHIeIc27L1lPV8J\nHmxdSinefjnbcn/d42B17n/KeOgTUFa0a7o6KsC6IUVqWJ0k0zgIxuBVPlcC\nr1veUDLbCV3svVspFLkOH8XuIuCHvKuewjEND4lDGcr8vgyQf5+3ww4P2MgQ\nl0kGotxpr4HoCYlwW0YK+x7ybulZa80NhFwbVSnVwJP5tl06/fcigqDpx+yF\npntkND52d39AO9luHlJ0P9Vk7YKAh1Fi+J3CS5sz9E3jwkqjsm98H+f2shSj\ncvoIbk7j3/NALZNcxPdz11lMKI/R2PJD3yNrNmLXgnL/AfViCCy/++4f6cpS\nKCVYHd1c0GUiPzoYBhSv78/kbo/GR3qCA/TcfEHT93ucGGYHbxqO+lZ6sRiK\nvW6MjUX+qYDwWRnN1mUBVtkRO0mjGcRP2vL2cvO92KRO/462IxOG8aV0mCKb\nLoEJ6e4qGcH4EDYGa5asSez72/Vqhjbpj6oudeYpdSlwYyY1vurT9W/V0++2\nDDGJ\r\n=2jSW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6Dbr2njWL2D60g8RR/F3cshPIK4tUCVhs80I/VCWymAIgKKkHOlvSB0XjaCLIYjLSVdwD4pV0JzG83M/UkWgk4ds="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.82ac569e.0_1595961750994_0.21679286198147585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.99df7397.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/fab":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-icon":"0.18.0-canary.99df7397.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GyOCE6cR3M5FeTNWMoWdi2MiejJ1agHWxlrwb1LBuKLoUhTU0EaiMlDyolI6gDq2Jn1CDUVyjut5wg2JA1a+Fw==","shasum":"6a65bea236bc5238336af137b2740e22409d9ac3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.99df7397.0.tgz","fileCount":19,"unpackedSize":78887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGmCRA9TVsSAnZWagAAZfUP/0ATrTR1BnvS9Rmonloe\n0kcpwyixJjxHEo7k7EVr3mTYBSU4in2NTACUTVruxjqUT9qw3aGfSV1/exTG\nAlu12tu3sirhLo1nbXVY92SguDsE99Yb5URQC/+6yryeD/0u0QEnzvZO2TCO\npcVKQraeCWerZFSVJ+HGQJcDd+cuf7Bm/5rqvoVUiuyfNdu/31o62g7LlmD7\n7EoZAsPnkszrDAz//GmkajvwC6aLI84P/ZdU6qQy61miiU7yBuQqVht7Ne5M\np2Y9TuyfL8GOKrN3W5l25boQ+GSHApKyd7Jds9pCqt+n8vnkkJCDJ84UU3pc\nBrw/LJ9LVy/iwUBI8QTn07ewm0fJEUhdPxjONTjL1b2IPH3VfbNNUVEnoreR\n6C590gcTaAMfhcYCX/aR6XIHmgnudEeePLhee9Ww8yZRBK8wO6tdq9wzpSup\nMaSpBEL1g95gv3M3dkbheFV0qLXN2PsIV2oMPSMNYgZDnNj+biUN25m605jz\nRLw7QoPF5pfL0WVR8RQgVxREdIORsrnCMeHGm9n0tjhGzI4FA+6jLal1W2UH\nD2gG1ha8Z4CFHu8K5GnUbb5gs19rF6VvzGQE/71VJf85ZgSNEJ0ShcTVQX/w\nngIwyvolrRYWA7Q8oCH/Z2UlpUfOzu7H/Ir4kfXx+J/g3Z6D6bk/Jl8tYQeg\n2m2j\r\n=DB0w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBRuVxHuIpns257Nginx9oQNQOU9hq7DlamgfkiMYb7QIgCHIs+i7fyJ8ZlhBN4X5vXRkbEhOi6hBtDbiSj50LtBk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.99df7397.0_1595990438471_0.5104955081630715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.45493e05.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/fab":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-icon":"0.18.0-canary.45493e05.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gB0urE47QSVrjZm1gRR2MLvYqV5pNPSjh4PetAZvu2cF0/I0+EwFVMfJHR/Xi9RJJkniP2y8q4h6pS7vwkS5Hw==","shasum":"e40275e22cfaecdd1e1e94eed775a383757dee55","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.45493e05.0.tgz","fileCount":19,"unpackedSize":80396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa75CRA9TVsSAnZWagAAkLcQAImFF1UuYVAxSCduyJju\nSQgCiDB1ePoeYLNZPF2M+zId8J6O23aA+CuzvMQwn22+Yh5EJqtGJ1h/4SCV\nh/sfozWYrpo5c6Akixr72sT8NhnqDsX8jUr7GUeWnGmdOLL0Mpj9ClMWUMxB\nRC+cKlc3JrrQLVRofrKVCpW7/dg/ZT9Wlm4lHI7RLZuQOxXxwdNZKxiRhD57\nid8z4alX3tdll4DjbvyEy1ekB60noZ+qUBF5Z6sPlU00czvTEhiK5EtfW6kT\ndbCX8HvRqIAfKkB24dumqoexmMWU/PjtISQzKi1p7eLaG6L1wEjqmQd7gUnG\n8wBJoWSWsaIuoki8SKeYHFNbCHFbRUb7wc5tmcgj5wJprIlPgLIbdDNsMO2Z\nVaQZ+oJ4UqYuTlDRdrELgW/QDvk5Qpy5nmd9vRoBmKpK5g/7xFCZuK8FzEJD\nnVvxJwY2wWTnFYgejYMDX9WBonceDIkhBrzWScE2GT1+xQmlYR2F+PLU5HuK\nh9NaZ16kCYaA13acPk1evYYYzhleK/ndv8f+kKmnX+gZLzULGiDFCGli6Cdg\nVOGkB4r+NHqliTaXPmuj1NxgphmxEOLZWKEcvN7lLMGP7qk9eI5AMtWEbpfV\nt9yJcszB8PcN+yC9/L0WU5LK0YoggV2bbscEcibCT/83qLpjCSMsKchQwPRN\n0CAB\r\n=DVP5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMTOldnkHKHaufmHvm4LIJcnsI9RCvIFbPl/ikE8kf3AiEAxrByznop+y9HmoY6E698892p54KoL1Uy7Z3eQH0VyyU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.45493e05.0_1596043001515_0.7001212057279897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.f2ab0a95.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/fab":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-icon":"0.18.0-canary.f2ab0a95.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-X/GgkXOhvgGYQeEoomdsMdKmZyXBd7REZ4iyHS+2qfiqIB+BJTckJ4r/6K4neewYNTn/yNNAGP4ylg8tnhdMjA==","shasum":"946e71b098167c956d47ddecb8ca419c75c08d3a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.f2ab0a95.0.tgz","fileCount":19,"unpackedSize":80396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAeCRA9TVsSAnZWagAAh4QP/iIg84OKkfyM5f4rtooL\n39Dlim1iuV3TyKmQzXdFV8dZl+RC4rv3bBRPQMhm3XIHi2yMYaHVEHmnhyri\n73roNKVfWq9QEGlb+sdiIxen4mcgmv+E+10jJiKvvQlj5/vwVm3xRbeEiP8D\ntBSVVyouuTfjOcWof9GoYEpWua0PqhwUjVTaOACm8HynTpBwL0/K6vc6j5KX\nkr5wKUjYo5xu6wfD4u6+VH54AI7LWoitoeSKr2n9uTjVoMCrpmCX62mzfCoG\nrKzV8Yl0u9gtudIuSK7JzTYzK1bc3vOeAZkNTpZLVTOO1XM+RBLpZvnQ+lwP\nsAOYhmu/KwyeYN8r2w1tUKojzDmN7QkKtEWtTXM+W3gmKziqqMmt87/zedod\n+f9Ni2/80XjxKu+WoHddTzkrmrPc6Qc/j4RfNcyzAALMjqR1LLSvIlX4gO5R\nMja1/HWbKs9zglwCQYALMyI1bem98Co5u1n/w6b3kgpG+d5P0UZ3qTuiejAN\nUKdZ9GKcxTSKYU2TZhU4Y6MJJk0YRjvjLpMT7MqjJpHEDhHenF3CUd6tisZG\nTv473XIDKTHxly4Rl2QZPJSdeaHg6mWRacEA3LsP1YO57Dg5h2ONDMBZa+Ui\nK1ZE/a9n0GQIeJD1fBqMK53JVv0EjjrirH8Ek9/jD8ASjoMZyUDUM6qk4K1S\nHho0\r\n=EQOR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDep0fIQglH+pRao3PeV+QMLy3KBvHjYo+tsFHKVEvGXQIhAPa3oPwWH15ExWLV+bLZUzM3f9ZN5+Aik7GTAkTfoGQD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.f2ab0a95.0_1596043294022_0.18086436186329857"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.45f9eddc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/fab":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-icon":"0.18.0-canary.45f9eddc.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-x78eC+eyVFcqYnGIh+/fA5jN69y3Kp+XisKH3OEVCpFEmemd+KFMFectrWqa6kP1+An/2pJguUexgD9AJ1Ty/Q==","shasum":"7621dfeb309f775ece9d27fa6ad5a2051dde48f0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.45f9eddc.0.tgz","fileCount":19,"unpackedSize":80396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhphCRA9TVsSAnZWagAA9fgP/0WVljohnprmQdnsz/7g\nNE3HMq6LQvCVhFdTMNblx2wzh4QQqoYgZO7JmMm3cqH0GKVUXLOZIpq1hoTd\nub4pH0WVt2FCxLifx24dFAQHrL/5+gFr6NqmDgAscEzSVccje0mPRbvc2chD\nsTtDSENpjyY3glAJYt1zjP+uKvu1Q4fcT0uOryKGrxkS76nIYymlT52mT+mj\n/mG2qwySBp33QnlPEmACnnO7G0VkjyYSZ3iQ+4UwvrEVEFybMu8a7PzH+Uep\n23nw1QZEs6OdDJfST1Fzf07awCBN4OaJuAgXyeVee4SuDq3y948R54Ha8SUZ\nTOEgP46sVpETqRMkCe8MNvsa3XNpnO2NrBE66jvE3PkQMmWs1b0+3rhUgzj1\nmSQSRNH0a16gjAJi22I9yb0G4mOeGvb/Tb6k0N6wbhxmbzEDgZFTe31qAvfA\nFvMQJcO/Lqjg9V0h4jnu4gTjONjv8Y8w0r58MAnDJfyfcfgRe0QB6nb2Mzbc\nZd423CVeMWl9FQ8NoPWuTTXTRX+2+rKlR3dFG/ClVm+p2Ktx+WXQqcjeGCg7\np7J19ZUd7WwqDjizOxXn2VKkGr3tfgotAx9s5N8+6MAkBw1QRJTLSIznOQOR\nHwy4xujPktdeG+wN3OqAAnS5SVcnxxhvQwfXKJjh5OBnTPAxC/5Osg2MiX9H\nfv88\r\n=odFo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBA70G+BrgVDwgbxya7LzSPkbywHm8vKHwiiKn7/zkPgIgQ7aQ2z+/WHtUBuonbiQLS1YimWfqUuJY5sAa3x8d6KE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.45f9eddc.0_1596070496764_0.4253020350940624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.b64663ea.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/fab":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-icon":"0.18.0-canary.b64663ea.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lwDCBhdTIaeX/6UVJy5lTxRETsaIMVQy2HPN4/JeRbblboZt+/Sg8atmsNAJiv+qSGj8GB/R0gVQGVVUvMRFIQ==","shasum":"60e49472754483bd7df5392294c21cb16056f1a2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.b64663ea.0.tgz","fileCount":19,"unpackedSize":80396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwa1CRA9TVsSAnZWagAA3hQP/3hyFBhoE5uOVApajL7s\nqm+8Prdw7TJeLfGOt+BDLoeF7Ei6UIrqMTVY1yPoKMsdGn/zgqgEMD9adqnQ\noPGQDTtPpB8Y0TmDSV3TzVnTou2kWi5xgv/kglJPsMJkTJFqNWPf5HbCy9Ko\n+FXk1OSRGufwyqifAnK2/4HUWWlHoFHOK/EYkhFJJKVNHc2kGhCWjGM03fjg\nTmlxZnThwr3I+XpVPLo6EzVWL9LAu2q4+yn+QNRNsjZt8JqsvXAhHCehRdkW\n33C/DohEPrGm/RIbjDgop7dVceXS1ZzNHnfNxKV0EdDHafqg5xLpSbZtboUx\nxUpZK+Ly5PG0lD57OuaQraCGJ6jXUb+CnQ1xaobVty+cCRWIq8PNy4mBxLDH\nwePs3Ce+QlOLcYvw+avzOF5YbaK22Ue5TCIwfQud4AbS66+l1ka/5kzimb3D\nZNvg1tEsTxFFnBYb/cIgOXhDtJMu0TzKaQdD0e5H06OW0IRnvZzorb9t/2iU\n0L5kTXMafGCDqL/0wF19KDh77qBkE9brvsIYammp+FMAty2YuW9rtpANlu9j\npqtis3bcEf7w55m8IImgJoUzbhMcwrRFm6c46Eod06j8R3ZNs2sQgSGapHrq\ns2Ly9ua1KtuFtQK1OGrd40w8/PatTZkcz27n1n+XFlYvY8nYcrrBwsvCL3t9\nLeHK\r\n=2v0F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAj5BKCzCElN8DLH4O0sxcjEqQmjOT0hiSu9CYfKiwN1AiEAst8ewiAefQpamQw1dSedLLoONjW4kzG4ftZOaBdSFcg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.b64663ea.0_1596130996674_0.05216886578542601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.9a1a4d2d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/fab":"=8.0.0-canary.f86f83f54.0","@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-icon":"0.18.0-canary.9a1a4d2d.0","@material/ripple":"=8.0.0-canary.f86f83f54.0","@material/rtl":"=8.0.0-canary.f86f83f54.0","@material/shape":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9oTYErl5oidYcLxs9ykgr1RNJ4fyKtdlTlc21/XLBTEnybkaw2JysU6issxLjjfas6xV0EuK9UUgd6XK4O5DWw==","shasum":"cb2315e2864d1d36fd10c91accf8f4d0f8aa62de","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":19,"unpackedSize":80396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXSCRA9TVsSAnZWagAAcBUQAJOKF5nikkhA/2OJF3N7\nCbhpACo3mmEvw7FnpKqd2lYGeNBoq0NJqdVPmWMhr+U1Fy2Sv/PePJlVx+fO\nYJsgP6tpKi6aS/bHD0vfdy90HBf4XCc+43XQV3EqUX61nH+zh3v2qwCNfeWV\nLKtMVUSNyhyVfSH3JUM3zmi6piM3shL+ufAUWRmzHA3N7sxqd8xYe49+VLWV\nO0oI0qhSYQkmcbwsBq6XLv2d7HceloCBseF6V68fqHWftwA1QQ3+jiPLFHTl\nYXRAuXTj/YUm9xpW6dMsoFcaxcHMkVboOsVT4HKEuxoA8tUVIYGhFxmNOtT/\nzB2LeB68c8yKLadyX+xL1MqKT211qnli0FDYOZ3tMHQ2lrgE3LrIktlOZpW0\nMHzKdCOQu6jttwz8RtVuRVyiMb3EaICxxruMdxxKeWLG/yc3FBOcGmxL6fLf\nLzgqg/CegQWRNfDJAsfh6GYzagS9Oe7JbaBGMV8HHX54Aj86JHdOIPTADLUH\nsLt4HQzNxdViGDmGW8itgdWGGSmmWShw22AeycJakwdX0XWl2sVGwgGa9qvu\n/HeFxxMo5fzVlcYFjYDwDkVIX7SlmQ790G/xv9Sdseh0jgQlPQJv9w8pqbBO\nl8KiFult2Wi0B8jbADYR3i8TrD3fwPx0/QbhifWUipg9ReP4D8+/0+lO4mhS\nD8Tk\r\n=6MZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeijGpay9pxY2/wX/gkFSOq/Mmn5hsiC8hwHgw6XIqAQIgbTJm7jaYU9/IAsK70AiDF26MLEG/XntPj3Dj2PtzseA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.9a1a4d2d.0_1596143057871_0.544512678740092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.887c2848.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/fab":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-icon":"0.18.0-canary.887c2848.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6IBtTk9bl8iM5Xx0ZgMaGCM4IfZjGukhfd9fttJvHyRJ/Www4kGetlncxN3287xj2r9oRx476Zt+ZGhiebD3TA==","shasum":"cdd1328471d62d07ead8b01079fde624b0b8aa15","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.887c2848.0.tgz","fileCount":19,"unpackedSize":80396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0Q1CRA9TVsSAnZWagAAjJQP/jDDjQvNiG1Kox5dYTrs\ntS1mSE48gfF7swySgTipbUz1IzA2XZZGZh1zqge7H71EHHWAHLzRAYAFiZNy\nCV/eX6lAIoO2KOuvoDDuhWpY/tKIB8hfOnQOXvCo5pRB9tBUZV0X4kRQeAEa\nGbHvkFNLMDANcSF+O8q3VDKeeGeSspRkDysxM477rCIHiNf2AoY7Ek2SqwKk\nD7udxEL+yKEJ6pUkgm/z2xeK8Ch9UjYGVoda8y14rmKzrGq2jBsfZ3i+Ca/k\ny49AUYRKzp8sHSULup83AlFfjs8/MHhreu2LlZYvmVg9HjboehCF5ur2mVbU\nP43Fc+7mMAXZoXZN62wyvmbMi8BlyS/xLI6fzjqOqtsL2jzTKsHdaUoVi/qK\nFd+6XTMF/N1hai67igDh+WS+rSuMFxWpLmSD9PRSlQ0zrB7CjAeTR3UbuT+V\nW1fVsWSJyYYpdwJuLVeQMebcMPtwY2p9qUL20+XEgkZwpZ4o3pZESrUBnsmx\nDrZFImanYOgHaP/AdgQEEAmzEN131UrAnAGvVxEe+vhMKun32CRxkhO5Vqqr\n/GmA2oQ7zQBtlo233yoqIVt2utnME+uycy11R0t4deVL/0/YA07vqBPQdAyr\nk67eSwf8N/sZtgshRomuYOpNkE+PKpc/VvwqI5rbHVPXSPlaM6Cg/zR/PdfO\nA8Hw\r\n=dpVR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAf0rBrtbIF6sOxhcvEqHjVsjrRFtMm1Pzw++t1PtjeHAiEAvC7d6c2VD1LlrbUeMrvTVVeqnA3ziEJucxuS3ZujZC8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.887c2848.0_1596146740935_0.22153881184532165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.354eb695.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/fab":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-icon":"0.18.0-canary.354eb695.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cX4I+VCaBmf/U7Cwyn7vEf0O7e+HCuSUaB/0OnWPevUGLV0Tsr4Uu6ZH2ujIExuseDBOelfsMN7Bw6lFo1hk3w==","shasum":"9a2bf4c05e3720f30572e4f63eb64cc7387f54db","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.354eb695.0.tgz","fileCount":19,"unpackedSize":80396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16HCRA9TVsSAnZWagAA0n0QAJsbGueh8IalOSuxaelp\nWTx/puYtoLYrX0TGw7yc0BItE66H380U06qAMAF4sljczUEhhxPDLMZn/Hj+\nVWD8A0u1JrIQP6jq//0SdhV1pzQOnCCAlxXOkbXWKIh59o+DA+c7kNnfOD0N\naA6Fkl68wCEYhpxMiFyrLILCjjqJUJXmBJis2aWUBfGmJL5HlIatvOwAwAZo\nly9/dMSbin8kqQdYzNLSBs1QCHnUz9nDBY7/gzdTIpUaXmcteYioe5p7WGOx\nLvrOT2BzBfDzoqTHH5Lnh7lfqkbgPo+aZAbTuHxoypYnfq3en5WbGx5AAJAy\n+btjIs3Cq7qGU4qdnGT4zWTB2qT8Kmj8AgCtRWsPNbaFf/wWBLJF5t1m5taF\nj0r/bFrq4AjiPN415NQIocz2xN+Hm5ANkXuR0AvAyICTIns3ulU5uCVx4zN+\nQafEqn3epaxb9/g5tisuHSW5YM/ZXR8iXHjb78Ysxf7hVLN5WdSKB87H8Otj\n6umrcyMhUg1T4zG2kBkHp3Eo2oFF3rwN6QgCWl8f1pECjLMdvhWZuNYhxJuL\nm7A8du68TDU4yZISsQCy5AoeYJG/PvBtnypiCPKXP0UoyZkacomcm0qa+u4W\ncWfE8KXT7+pdaauZH0iuEruTzL72SrRVgkH1HRIezDU16kOVMMjuZD+g7ghI\ntM+l\r\n=y7E4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0STeBlHWobodCSpsILds2CZa+NF2hyAV0fk8KrgXC0gIgWUVDFlmc1o3yxQpp+dRBubVjA0Nzzcw7b/a+wcic0Ec="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.354eb695.0_1596153479017_0.6377254514216406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.7beb236c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/fab":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-icon":"0.18.0-canary.7beb236c.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cq1PNweN65PSke2FzcJOqpHz0dhLLJ/FX/tD//eVhgduluRu1rHHLu1VV4UOpfeI0i0J6rE2xJzsNKmFOij6Hw==","shasum":"e475306c5dc0d17949359e25bd4ce4140831bf54","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.7beb236c.0.tgz","fileCount":19,"unpackedSize":80396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFeVCRA9TVsSAnZWagAAyBQP/RzE0Pa7VRQA4JSEfFAE\nWtAcLcMVMV3g6CjX2I27AGRv0gJsKDT5+j/lpJ8lKaWaC6pGOHA6mRKBVlRb\n+6OcmeoiGOdgfmTDBBeGT+/N3MFa0gubHeN0JfWGDyFEZyjo0b4BeefaiQoB\nPVjQ3y6YAMza1IyRZCrfYaUMM/IgSHi+PKmoCPdwuJHBYt1MRfxGJjqLgM2o\n+/2E14qM7VL6fRdTufTS63SuZifudx62v3DdgaZsMhLIkgD+Aku3jCxaGI8l\nGVALpfrij5aiS8B3xF611FcOvDpVc7iRoFjxwR+YpwPpsU60LYNBW0oNkzbn\ne9bG1qccMdfANWRHpY7nb3zUGmhO8v7XCQqdO4PgDYejEl56FsY//zISE6+W\ndflPRzFYhse3U2MHQu80IImGlys09riiirDjeuq8aMTI6sApglJjNuEbO7m8\nKzkvAzStzNGA7oLVWpUSWsr09KRwU9rNiNwRqk/KFs2HnZAkeWPOpT76EnHU\n4ANoRQafo11uqLvly5Ji/ZDjrOPNgkd2TEa5/swE0Tm9y/+qLCVSWQTaw4Hn\ntSqCOy5dfgRlsBzwJkZXVZ5sjvme8RSwKwY4DgFy+c2r6AWzjlzq8DFDyLrs\nMBLgHeQ8CkrAUuF+KJfKwDwgKXlkiCySsqbrbXquScAozcxHzjV2jKAHRAq2\njCK2\r\n=VX+S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjuVtbCU1/2mGuFSvtLqM5BfLIuMzFGzs6I3gGjPjdVgIgRaImVtuwXD1pv8FoGIACKVAEZDb7u/t020K/mtPPwnI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.7beb236c.0_1596217236864_0.28687561567248854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.c44acc0c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/fab":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-icon":"0.18.0-canary.c44acc0c.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oabfr/xYtaYQtBnCsL348PGhwmN4emki0mRQokbWsZsm57HSe9027uAMIJFmAXDlbh0TKlRQUvL6L8jZe2OtwQ==","shasum":"a0a6f8f256efe6290be0983e5300c3dab8f72f97","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.c44acc0c.0.tgz","fileCount":19,"unpackedSize":80395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjxCRA9TVsSAnZWagAAt+gP/3IPH/M6eBtR+fb6fSre\nyzTSZhgY3MPXcKRVNYBSV7tiuFT1QlwjIH5g0hibMlNBdLgRZ8OyI2ttwyJ5\n9goA49UIGNl07B6/8lmbb7hBSZ/MrqZWW4vVJrjJbqZcpHj+GzsSU4tT3ola\nY44DsqVWv4rVzm6vIGAu10PPf8xPceIyth+gxRD2BEJ5OO7o530e8Z/VQF3Q\n/+XfGe6I37i8+IhKlcWXl2Dk2YroNykjyM5Ll0bzXGzYiTFUdBKC8waRydda\nHHXb5FHuUGRZ0iX1SXTUiG8soi4JSaz+cTwuzW4sLitVOMjG29SEN/Foduqx\nLpenRghMgx/RIZsPVDxklbLDjUgsX36EFO8sC2sEMIerlLIIfUFwNXUNgA7d\nT2uiuBbERV0scFpalFPEMlwwFbV4mQrTjLqlqolOOKC1t3Wir/cKtT0UTANk\nmDZNrh+OLunPMJ7EOeN1sJPT0OtbewxF9V7Mo1IE2GZrCvAmIvjUssm84gLe\nxzaMh2KBbZLDUYQxbFKAbLYyonxpPPv+coXg3fkEQk0m5eyjkHmsBl1e5tLi\ndM7QVgc0NpCGE29qoj7uNOz+0GAn73wMDVV/btoI4iZTXGEfMKn+C2p0d3+T\nu2hOYc6KWr5U8a1o3J5/6RfApb9OaqctGAzxeebSbdl2taho6+h8SPU6n0Iz\nAUXw\r\n=k1H5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoogHHojO+FLA5ezU2/Ge2r8qTQcQMOiAzb9k3ENY2qwIgTJmqX2XgBmvTaRjN5q2miqWNAwd/YsiiMKBvXMe2j10="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.c44acc0c.0_1596229873304_0.02993905003765618"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.779853ff.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/fab":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-icon":"0.18.0-canary.779853ff.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-G1bmExwZkSVZg0BulannqjiKlX+56kO1auN9kTR50uOP79vbE8NLEBSsLAceV7dy1QOjRl8u2BiZS1up7zDpxQ==","shasum":"6d6fbd5b0f1347a10f6ea6087c72a306f8934f65","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.779853ff.0.tgz","fileCount":19,"unpackedSize":80395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgRCRA9TVsSAnZWagAA0jcP/iGmKO8RDU3RQ2U3nb5Z\n6e3rBDUoZ8yd7IJax5HLOc4yDtpirxDqs/xI7dxYH+eaF+UuOp7ARv1nBmDi\nB+Qlkj3TJpP5w6NVWu9Kw5ikNy4wVZw+5ZY6ZRXsGqlAEyfKHtvnbjupiU2F\n5k3zKVPcwhVWcJvy+LNYlPhjuvraw6fcdRi7qAj+Vlzkblzst0aFOOPXIywF\n+cidQ27eyIwUUXZZEHfuD3Ww6BGe21rG0K2uzhkXxzPwLra6rwokFiqOPnBl\nofkV13EZo5afzLV+iYCLWPaCUvgjd01H+6XN7ObAfuX9JgvkW5EGpM/2EO+E\nhlCuXyEsPlEcrkn1Y3QjklGpDzY1WRaGFJCI2vseezJHDT3uQlzYKr1iQURA\naKm9Z1M3y784hmW3kIBbqCybANamw0JKP+nTCtoswZ5AHbVcinW2c68bvJbU\ntNpqdLsrM1UCo810vkEVg8zTVq6CIe5wIxVxKjm+VOfu8eGAmO84YH25kIUS\nnkFTYvkWJW9wy6+Wid2hDWj4acDmmMQ+dAOO2lKlkAjFbDCiqkc657s9kLd5\n2uhK8xfSTG+V6eiCcJEVnTM3/gQpCw/Z1YgSHHYv9+/FsTqxRSf8YBEUlAoA\nkZQEJLMgh0eS1sY//vq4EPSDKbM701EU4XUnsBTvrIpEKxcE+8VMccGi2KmC\nYPbY\r\n=R8zZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbdP5nDlXSgdO9rjXxv1UiCUrP5ngfjsIh37NC2IrPvAIgflIxyyeItjI3eBbCbshALeoM+v7rozDrojfynjwEnKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.779853ff.0_1596475409379_0.9443895929463575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.8aaf270b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/fab":"=8.0.0-canary.74839da7b.0","@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-icon":"0.18.0-canary.8aaf270b.0","@material/ripple":"=8.0.0-canary.74839da7b.0","@material/rtl":"=8.0.0-canary.74839da7b.0","@material/shape":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-wgef7pr1n/mqBLweg/GRhTR8TKwv9Tmqqh72a8fmJnJwS3RoUWfJJXHoWDT41jvLs3Omfksl/dbuSpjeAOVxsw==","shasum":"cc92264d9a2f3444c1559473141722e8d26cea0b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.8aaf270b.0.tgz","fileCount":19,"unpackedSize":80395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFovCRA9TVsSAnZWagAAPGoP/A9t+LLtoJgkz9JjxIZB\nuvZfpONkni+hNOPJE2/4l4knA5Pl/g8NUYmZvb28a3VRt2BShKE+b90DiiG8\nqf5aD/MoX6FAMSok7FpsDZjZ6d++Nsx9LM5JpRgx1fhd8Ih3uWXPX0z2o83E\nxqaSQlFxdrqBYHsZaiHHwdoWer9WeslIh/NiZGvDvYmes/5BFINdAh7Npmb5\nGiRUn/3yk++JvP6yjagXKAJEfkwmN+ZzoNJf4y5Ss3yLMHSplo6YkjXLTloK\nr6hsNcaoNrzrQpM19NVg+6oi6SP7A1SPmMtWp0I50he+t6egvOTrVJr+v206\nfNAqPoXIRlYqF13SJYi/RRGtzfCvUo5G03pmZaZYU7aMvTK9BTsZVUGuVOkv\nCCFn8rBBrVO4cCNYbyim5EGd8ufFXKdT+mUhqBTeqsrVlN6Lud9zu+rYzX7x\nWuXuEhwOpXT6NgLhuktsdy6bpk9HSCnwZKGSKGeM2zCw4sNMKrLGI+0DinRq\n+wZhccF3YdHX7/Dep7i8lnuYzIJk5YHZqUPyTW6AdRhCBRxFW27hPQzqhgJL\nyzghMoOMfbrH2vWoeqnud88Mtp5X+ZWLM33+QCa+SwpV+cvRBYrsF9ao0aE+\nZQ+1M2Alrm5QP9QA5N34hWVUa1NbUpuvVsTi1bza6l9SUwGjWYbycHyn4sT2\nTz+Y\r\n=JVWb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAhsB3D7O2dZCSb2d1Era/S307wty0yoRg2rGkxgBg43AiAnB76YoAtBeEespQxw8vSdvNzrKTzvFNVCO2llMkCkQQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.8aaf270b.0_1596480046651_0.8405055268799428"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.5cde9f12.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.5903d39af.0","@material/elevation":"=8.0.0-canary.5903d39af.0","@material/fab":"=8.0.0-canary.5903d39af.0","@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-icon":"0.18.0-canary.5cde9f12.0","@material/ripple":"=8.0.0-canary.5903d39af.0","@material/rtl":"=8.0.0-canary.5903d39af.0","@material/shape":"=8.0.0-canary.5903d39af.0","@material/theme":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zflzVoXto9BvnDqJ7vO7ZVlQlXgZ3LFTrGPhccxXJJ8AHYxCwb5bjBfOLjdEQQ1cxQ5SfqvYoUwgFmchhDwXiQ==","shasum":"fbde8f7b825528147b774dc2ed70604e0bd42e2e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.5cde9f12.0.tgz","fileCount":19,"unpackedSize":80395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF73CRA9TVsSAnZWagAA5/AP/02imM93DT4pVp4XUIrt\n/c2Itv6AsD1uiQNrEdb4dQRLPHeWADHUETEbFMCFoEw2IXV4ssfkhQAnLnHT\nid+igAIL1fP/xfBYMyrk5AGgA8nWAP1Ykx6GU/pfdXhtAk0nk1fFIPEFTmeZ\nQzOldOSMj3oWYziY042mtqi+1zHNzWQCSH4qmDSc+Z+X3vmRwLx6akwtkNWV\n8eFE1nca9IK1MFK0hJYOvAw+b59QjIiWBfd45oFqd2rfbsqHfAKjt669U0qz\nHa7IKAJEomNUw3JOj8FXmqCaK+JUgD7X4Knx3+d6Y+cH3QGpBtVE2AWGp5bQ\nw93h3xbUQC/qJ+k5752Ekssc4bjqAL5fK6rJk0jxFYA+dxAnA1Lr7HTbbri3\niEJSMvjj4FTkebwPY/8QtMTX1B/g9ux7AkpMieYEQD589aqBgxdDZe8LxsHX\nwZaRikKLO6hxki2TiDGZKlYBgPX/vqzo1REgP+SL3h8OEOhxDaRs7J0QbNl7\n8e8b5dp1qAXdXankduDOiXzmRTk+SXGom4xz/+Clt7fkQTKTJU8Y5p4FQbVx\nYDS+2UXHo9/rEQekLxCtLfd7qT9fd/G0+VvhQqP84Ti4VaC0IhTg1WGa0ShA\nlCfXfmKSMzJOqsj5tirl80MgglerNiHFNx8kzthK0NJLKrY5nZNeI6inJmp8\nTF/b\r\n=QMFG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN/ROczjc96Ec32aXccAJ5T+jpUjUvTkSAAL5/cLjHLQIhAOXxxiQQEOx2bLZC+Z2XuVnMZ5w5/7kl+7SQmyF8J2Qu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.5cde9f12.0_1596481271545_0.27910418585514174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.1607ec53.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/fab":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-icon":"0.18.0-canary.1607ec53.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DjLdYMEzFy67PdzvPMU9Dnp2jPq/AoAzeTsS2yGR0Xsas1LxTwmxJfSwXMYjD1fvDwS9OUDR0pO/XRI6efGEIg==","shasum":"2b90918fb65fcbd6a545230e1e24e7cacda605e5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.1607ec53.0.tgz","fileCount":19,"unpackedSize":80395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmmCRA9TVsSAnZWagAA3U0QAIgnTuxMx+EkJhxxehYS\njQlVwA3+5+i48Fj060ymk/MFXiINbC4YzEARgyWl0e1jDf6YjKBLN/VacyQf\nG0OGEjzt1PHEgnBSOVVNIxXlActwvci1XSd6kaOy5NVYmHbg2GDq1/u3kgL4\noa0Ej1UQr9HpUsSZSasJlDQ1Vxc0pbzDww+vApxrP1GeKIw5GaT5gQfy4RJE\ngecQuuI9yaVfNukrFYnViJsmVtY+/pNZjYGG9Jqz434v1Yan1NZF2hGw3NTI\nIgoo+lpkkYfdzDdG/WVlLWphZ+9XzgVK6HMo33I4lJ1/+p/o8ImerIJPWY6E\nrlAgHULcMmo/NgWQ7gosxIf+bVqg7FEUbGB8R/gcAK+z4GtMmQnT7P5nD+jV\noapwzpx5rYGkCV47RfBUu5fh2IhfGX1GAKrRLFATebAzNFyMFNAa5UfHE1eT\naHgdodboeRld6Q0cKBMCmWYc6JkO33x25Agr3PKd8YK92b6nLd+YjdaK9xDh\nRezQzC+YvA4d1gk7M/UqWiRE1A4pEFJ3HQUXxyJRLEAFW4U8Fd37Ld4WcCyC\n1B2X9Cn+pA1gLnVEtQAIJxczZie7f/XvGAaqDeZkHvberQBYdeIsdJzBLkSz\nUvS58B8bPQ9c9sgt2kXSdfFnKDwWFtfpgUW1WKL/L4FrrUX4vbRvUtfgGOFa\nln+Q\r\n=mBn/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1gl8ZAsQLvAHUzK79GbeZnBnLXzPcGIOf+K8VCdIodQIgIRyG8ilh3SAtACduiiyXt0fXr3WBfm35jo3Me0dKs1k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.1607ec53.0_1596484006417_0.0017484372039915375"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.678b30e3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/fab":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-icon":"0.18.0-canary.678b30e3.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YlO5l5piMNsKGTjRIvM6UnCnTNvNDNAcUOlV4TPvxMXY1G5ZTatE9ZgzH3plKDPmm3g3ZFOUYEQkjIARxCsCqA==","shasum":"19bf346acf4fedee26edc9018bd9cd675cff9ea0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.678b30e3.0.tgz","fileCount":19,"unpackedSize":80395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqOCRA9TVsSAnZWagAA5DgP/RX6qZDl9ohZFw8XZ8O8\nJ0qyQUkY6EEV0z4E54+yyTVBhzrqyBYY4OgDeDpAn8yfT3JjjteHhfBiv5oB\nKyL1cSY2zoy54BDXA9esS3EEllgoyyCY4zg9tj4UvKMNwZGegtfTWYhc8rbT\nUbbH9immeMUJxTyZFj/T+XkL5F/UXN4P2JgXhiKx+5EddX7C8tC+x/2ULqdA\ny3AfV5lq6fhoOYkMQ6PxLEFtnj5sRyVN73OHdHZotgKtULk3fXKty94wsZy7\nz1auIo/mUnnSa30X7+14ud2uERVUZeJ2nQjq8ENLeBrjwsUmej/SYF9SfJWE\n+emIZ7ig2RT/GAYESxFWgjRG7KFngS+2YaSQrdQgyt8ifLzoSTvpatSXp9A3\nulTmQw2eBCcLUUTrdpfoQWn1m05jJZAECGX00AGKPlLs2r0Mn57LHiA3lwUa\ncDQq3LLRmLnUvHDSpUK6VSkjsU+Ro/zWhNcARoL9D9uDZ5mVB0E3Wu7fOXFj\ndHZ7GMrh/cuOQctEnx/0Fj6xe8uGYmEZkr4OiWklTSdZ1sac3nJjx6ySrsEh\nhzJPGpXezpl1TIAFN0GY8T7Iw1MlzIz661xP2ipXcgBWrP+BMQMEUIjy8TAA\nZ3a+4RSNuTOZyJ9QG26iaOPNYNMurG9v3yFHB8immWy70kB7OP1B6PKD1jdn\nrNqy\r\n=d1QC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9aEplBvShbYrPiS/na7dkt09cQdfvJKZHp75y5IRH3AiEAjYYrH2OoKTezT88dH2iL51sbxCGHZjV+LoPEEozHQdk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.678b30e3.0_1596484237740_0.963056698011721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-fab","version":"0.18.0-canary.21c55569.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/fab":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-icon":"0.18.0-canary.21c55569.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-E+1gHDdaHcPK7UEG36qDu5v0VYzLRzsw52/ToIsbyyCxYCV/CzYUR79DwBnIoMG/QkpEUSQpu80aYohfnGEu7Q==","shasum":"d37f666d3f52617de8726c321051046eaceff4a2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0-canary.21c55569.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGv5CRA9TVsSAnZWagAA6u0P/2GDAfHjm7L6+dl/xi8H\ngmskwqs0Dqx5uWIPQRWvFTkhu3xJjz3mpOIGwC1ZGQN8/zuIqATDepO3Z4w5\no/vm9SzomCLWvuuxiidLxEkt4NcRS03ukROwzWyetYBXIm9gac0BVO5NrAUv\nrpb5pr/kBrgyBPDxI2At7jWU+4WAyjBho6V5yijkidhw3iGYN3tfkTRjKtR3\nLH/wDBLCShm0FmGYBw0pZLVG+BwWcFJLqVWD7kp4RJ5sdHQx6WpIKeg3qSfM\nrrtIsumk5/6nqW53ypeSylNdsotQV8UwwbqvjhpwvJ53PWyyz26Deuo4f20f\nE7PIkYKpTRo/4RiCzOAf4EAc6giN9VG+VbGaIkx2dc4RYE1CM6yc6YPiafzf\nivG1KUFq9oaaxDgLeXWvFiHxWV+wtrDFLTpDhF6L3SAY7Ykcrh7cUZCP6oNn\ntgB6F/GiZwPEs6lbaYpEhspXlMHarN7V9qdpqKg4Puu9pFhkFPhEqsCMUVrX\nnZ/znwr/izXpT4+SHqk3WVAyi0O5KlAg1YGr0dcQKLYBxk8Rullq2pUcbqgy\nO8jlKP3djOqjGuyYQBG2aApZTQL8bBPNGmeXu3dTLqIEsLsTVFCrf9oBbY0x\nj+RAYR2h1Mi/dLzV1BkZlt60qepF6q0ZF1qHrLDv0otgBZSeQbDv2YXGMBMr\nX9mr\r\n=Inm4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDypJB5o0dGDm5WAFP1TkXvvNvq05YFscCeiE6rkzhN4QIhAOa240QhRbLU/LTzXncybaq5JV9gJPR2tFArLIum1NT/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0-canary.21c55569.0_1596484601043_0.9366497672759262"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.907d4d7d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/fab":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-icon":"0.19.0-canary.907d4d7d.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vc5KPEAwNntj90d+u6vdxBYv+b72B7xvvkklb8EiAkFXfhd3fgyIJUhngOMRiObqdbai6uVuR2Lcrn6jcoxdmw==","shasum":"7c2e820508a35dc805b9645043c9cf3bad61b52b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.907d4d7d.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIARCRA9TVsSAnZWagAAFMcP/3gpROE3Zuy2Go1r8PrM\nKLSqbfxvtxaZ5DCC9Dlj9oPQ1IvcbYMQ0zHg1iarrbJUJUu4DwCCVFImYpRC\nQP8SbXPk76HebzNglRH1jIz8AqrkM96DPtq8YL3lXSUDZlk6kI/MOwJ7667d\nlS+UvuIt3viAs2VlH2Mkie7GFAiD5X7i7fIzFJ2g81kqjp/NYk7ZWPXLEnOY\nifx4IbDqsrcwkuRIOWcnQj0byH0mUsg1K4KtJEb1zdEL9X8niDcgf53T4iFr\nJAYt0XEjlmu9Na7r8SIZtap9O3wpG59HIG+eLHw91kT1108C/GtXcP90Na+r\nepc1cBnrysvqiyCF9ZtrCiWUvCXQIWhiaZ4xOsECld8ZepD3g/nXCN/lK/YJ\nXTemyI7m4KWG/1nwk5a2BBUqj82bqOivcFNBX2VkW9frd/aUE0oLLh5r3v5n\nl9Q8m+X+kWozVOPr/Jfw/LGCrvYR/irypRFbRyBs0ExCffyFf5f0jFkrcGAN\nC3E1/X4Mxjgd5pMtQUmFW9lJYSmJTmjFgQNO4W5nQfQwwGH4rqCmYqu2IQsB\n64KP/xRJtI9yGG303RybSjCh73PgdgpSxk3Qok0yuLN9kMwFGSnEYxhpDY8u\nvHZFXCDY8XyMpbqZPFGxSPnzbTMukXdgGDpU+8iQ73dSsex5Bz0NfTWg/wrg\nHQIg\r\n=8sry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHg4bHg0mgHnpuL8Qy1dvO8WTsWrK3kq6CEXq8nKVo1IAiBtm54gCUcsE9+LnbcUr+fciigmouhqdsoxT/hqzSmWzQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.907d4d7d.0_1596489744959_0.9472080844977055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-fab","version":"0.18.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.18.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/fab":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"^0.18.0","@material/mwc-icon":"^0.18.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=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-fab@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-8CWcvIFPiSpVmex7ABjQcXFoc1f7Nmi324wSjENwo38rbyiZ9B/3AhPOGBXtO7QEPsL7syna6dSnv0aHIQOPhg==","shasum":"ac82b69a79dbc4625111356508490be1f2118694","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.18.0.tgz","fileCount":19,"unpackedSize":84539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICHCRA9TVsSAnZWagAAtREP/0/ppplL83AldYtSMlxS\nIGKZIyk8RodUuC3xteMZk09MDD0t7J+ttALWb0+HD7ar/7/lAodox03XLqBy\n6NH70dPMNK1TymzCfa6J93GEGbN5Agd+j7MU3gJEaos5eLhmGP/N/u2V0j0j\nyleg/s4UwHaxBt5LKpgopGw+7qm2iwDSkkZokOy7dlQTIt0qXm1ti3BJ7Xtd\nGwV9A1fq3MteKu2AnX1CNYCF5ZNWchviNsRBF/dYxenOAwa1nSX2SeUttjVR\nTrpF0PPbn92ULFfcxA1RtKKwQcl7pDGIBBg6UXNkFpFgLKKMlfoiMEzDzFEb\n/oEhajaPVXnCWF13kMGRioA69O4PH6bYqLHcngqqTCHL04Tyau2pD37JdNUK\nDLIFkCn0oObRGilY3AxoogcjvyAYd/W4QMIokmes4j5hhLa2qD5c7ux/6UB0\naJcra7H/waPZf2auN5Tsk5x8HXHbUMH9Ns1ffA0wtJXytl5kaTQxiFK9eVGd\nGrVGhvDwOb2MHQ+mlecvXdv0oYpLAQNZ5+MwX759ndj/n4L+xewMrhjOUBDk\nNDeZMcdwNDMmoGudGma1Th0/wgzQ/o1wCorXVIFhVxu82yL54PK2TK+nhPB0\n+5mOnWd9+pbCXLBwNZKkuVijQNFOCirVwr2NgyeTW0cRsTCyC785GajsBbQV\nHNR6\r\n=zePB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiuvgj8l2E5fBpkM4mMUgzzf+jkpZUpp9rjKmQOMa5IAIgeltUAej02JhLtmlNVigC2zMECrh2I/0OceZC7xJBAhY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.18.0_1596489862938_0.21157512778946197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.f7958e4a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/fab":"=8.0.0-canary.096a7a066.0","@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-icon":"0.19.0-canary.f7958e4a.0","@material/ripple":"=8.0.0-canary.096a7a066.0","@material/rtl":"=8.0.0-canary.096a7a066.0","@material/shape":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HgB24h08aBUuMUfzCWh1gPcLdz98Hz5+hwoQLfBgbW1JuGVmG4uT8dMjPB/kw3t/4YsptL4cTAj4psG8fPai8g==","shasum":"5af3f518916732a3c818d607e6f7e22430bacaee","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.f7958e4a.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLACRA9TVsSAnZWagAAjuAQAIWG+fmaAtC9h6hzDFTv\nTbBolVF42G/6rPw20dXeSIQHzDDvqAQQrGZMbLgLA92TTLc21nKsS4CBs5xI\nGtG1JhVKN+ZtdN/Z0rGQfmQRwNpuEQ1x2EvmuMLUf7Z/kmiQo2YIKT3tydUP\n7wqnS9GKWqgA45VHLcflrxzqILbgGJGJ90DXpWb3BGP5aDuxO5gEGW/Gf+ox\nIdaSO952ROAu025BSouOwid5SfO9zf3F5ovv6ul/X0VQnu7Z6FesnsybMnto\n8zMvQV/2s8CUtsv9b5+7f5jjHYyBmDHifsW/uFsbltQbhf5wPF4I+xE58Pe1\n0ODf84GE0mO8WYzf8u6sUcEt7gwG1sEbqplc8Sy24//OpGtee+MeaLb577VL\nbZcCAxIw4jqgmYF20ei0Ms1fv97Tvrlw+eBMn4VWOBwAvyGNBiTKuNhlbVBp\nXQeklpA3weu4pitslr3uB514ZBE9NzhUJtexSz+H3Q7njn1cwQL1hwPsAZvU\nIctnEchBIZ0lwLdp7Fz6QgWLHK3F31TU3O/d6oFjUiLxthnGEIzqBqK/MDwW\n/eEDBZOq+nR/LretMnCmoo14lL0dycNvXQ2ywrxTeRSiZzoTLJGdrLh4TJn/\noU8rlMw9SRkONYLM02+PUjVjYQywFQ34O9CTLoja4sk4gswZVjMfrHYrnAHm\nXxwU\r\n=2kMF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjFducz6XFg7c6JP4SBhch35PrRDQJRTsU3QofqWHXvQIgIq0wdrQL1H22RnFn7Hhrqj8rIkfcpkXe95eD0oQgRJE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.f7958e4a.0_1596506816346_0.10242565815343396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.f8ceaf79.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/fab":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-icon":"0.19.0-canary.f8ceaf79.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-p/TINq9YaIW41Py5cb8qJ53JMIzj9k6nk6kfEz6c9VD9k+yFviGWWmg3z/3+G37v3tiCdd9meFTQ7pkH8CO7Tg==","shasum":"45591430280fccc2d5362432b743d55dceac394c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.f8ceaf79.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRzCRA9TVsSAnZWagAAe3kP/0IIkQJsyO8BKzLrWiH0\n8UAJ4Gb9p8fMpjD0wYst9b9FQPPgGtlqT/KbYjD6j9aCb3Sc1A4yj+IuKSjG\n3LLG+WKlEnB2Losk3mk5Jw0d39Pyj5moUMvOY9WQRFTRqByUSoFZLGUbMXBK\ncKe1NsRb8gMolq1iJUEO08YTPYd+8JEoLNXOMkHJuhaYY/k1CS524ecseilQ\nvxl/QvsRe7+AYETBzAgF8KNVUrsplqRRy5pJsHNSG/7BYxYTKbZVy2OcyIeL\nWjLbdsJMG5lxiV+XW1OIT+yZAwk8s0yrER2nUrIsa0ZahLe5c3dBYF6zv2su\n3sSIVz+o/L0GuF8sC3YaSgo9qT1a6l/QKIufuOMUGQv8Ig9xP7WvC6O29VgV\n4ARhVILfGJJZf2nuqjJm6M/N78ErOKg9/b6j/wQopknm2vGHlijKNkJXCRYU\nPr8zXoXUgEmRO9nZtQ5H23TCTgQf7OE2G4luVp9ewr8cM5lwushxVKy+pzQg\n8ZIIKcVw+aVS7zSmQdhKXjOt5oafnoZSKWGJH4zUJOYvuUHHy9XepE4ZEJbI\nwqINSvHTy0nkgfcylkUNL1VnQVFt/bFbehbSFkknO3JjkdqJCAaYmGQxPPK1\n/eIiGIrZ3JJ3ZaIq7sCwUcysQVCteKGz7LUbesQYYRoRAn/0peYYAnOJ86DR\nyqFc\r\n=AktM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6cSvZMSJeRpZBlwr0u7eQXc6IgOn0WL75p2Ws/MBKUAiEA+l6rcHbYI7UcBPzllKvFUqojgEfjfca8dCzoVMnWjWQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.f8ceaf79.0_1596568690768_0.33356932116178895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.6b9e385a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/fab":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-icon":"0.19.0-canary.6b9e385a.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZTvJ7CJ7rC2geqCFlR/MWF7PN6ur8wvINEsolcg2sguTBxj6xMq6z4Sa9e+U4AQhuYMXHd7qPGwUiIX+7h6P/A==","shasum":"fa7c2dfe75e012a489b8469b41a1ab5a8acbc511","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.6b9e385a.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNQCRA9TVsSAnZWagAAs6wQAJRyKBRMQl6HqI4g/2CD\nfAh3ZQq0jKJ0S5ZtLmOmnLPSEcLHOfjnxDMoiFPh4/cQ/52URS0sgbolTx8V\nmBF/v7ITTVIS3LuuzxEtOxI9iWNCqXMZ9h/Whr+jPMivim5kuu5VOujq+VWD\naoWKBzH26N+LjK0510WOPzabIzeaSAzI/kRQpkBYQNNN9rtdxN+olhYANYMT\nGQrG7OKQeajT6famGBI1LgrVp37nS8JdMRArmWYFKtoPLRjQhgMglvhqjUNi\n8fkpIwEf70C5XMWCtTOyJn7Yk46NNEupzVFWNuySPj9qG4B4oKZKHMOzDEo5\nO8231EtbRH72xQHgBV9WoB7xF0fvq85jjZ2zNf1JqVYnC5Eqqx/VwIDFw+wn\nVfcaW9HzUfVVOik8hHpjCr2QOr8SCW8GgBGAP1S/96KDyW4s3+A0K+1CN/14\nKAxli21GSVnCwQxXP4zz6pHH6yw4QV7Z2us0eORr7XkCpzlT5BxoVqyctNgI\nb/bBzrXKoKWNMNYHiKbx/vm81/Xy1jhxK1djhOwUoyarxJ+1pJ/wuGlj+Him\nT6Xf1GGEw1v8QY7Cyq8Oxvl5paPiib44KHR26s0ek+cyHyD7z6TV7eaOQzZG\n+stLsBKEjQ0hmI+4oaFWZcRN97QwZYjmLx81itDZ+KwkGnyK3G/y760dN2w4\njFNI\r\n=hJqL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNC+r0LN/9GQcqx21j2drrJlMkQQ8zWyp1+9BjExZC3QIhAPKdg0MMvKebc/e4vAoeOGevb7QdK1NxBAUoXxhcAOiF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.6b9e385a.0_1596576592280_0.9084894481295798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.9a7e6d2a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/fab":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-icon":"0.19.0-canary.9a7e6d2a.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Peb89CO8xThVayO576N0VB1qVilwERR7upPZL7kuFQhZZccOStwPCcUSFH4fXnLeHRgjSGdxWqivyHr4Bzfd4A==","shasum":"7b7f7b3933f774ca08bffb69ae44612b91a40c33","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKit9CRA9TVsSAnZWagAAxwIP/1/7n/JaR6OXEqRPrzMR\nI+0tEozcztMpx0P7iOoi0dKnJQj/6wT0AEBkTsvNjDWNyg+joi8w34sPgSDP\n7hvGr/vr/oiSi375cqNfnO7glSeAd8N920CAtCQzPeui4HUbbguvqbj/l4wN\nWRl5P+7xpztmEImjft1ThO+99rpz60zyroT2Ik8iraFYFo37hpFLemDvlSl/\nQXytuKiIdV4rgSlg2/pngbiN7Y3RoWKTIYxXbZarpKbMY2MC6Q8Q5MJEeRvB\nl6IhwDanLyh9HujupkRb/y4gBQcpc7PRDVs17bPTWyVjgNWQjxAcl3V0W3VZ\nzJzDgv21FaOYKX4rUcAI2MvQMtlCQoHgtqaksoJZUjHGLJqqupQeLWF9txh6\nG8GhiLY4Y55ZbT9s7naDkRBXAFgh5wuTMIx4QrnMNCt3+Mi9+g5V/+62POBu\nhCFkMjZ6gMh7IbuLz/9PBBYe9sOowrMLN0MBA1FXfJERt+SmRvy2Y6hSRpCx\ndUJKGmrtjj/UKOIgormQ2wL/ztnFeQCF+hx4SRyVO4NDfgXbXoMQfJcXJdBt\n4qOws6YDIbio4uJaIVG4fHk5Z7mN6EvB947LdAHUMaHAYshe/FBUhWu5P9h4\nR0fQDdM8fCxVG2COnu4URu1RAy5JJoeLkkPaR8KPKkXgvWxHM0Ic2u8DcpJl\nV7E2\r\n=q6Yd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSNgiJAxNcqHGokfWWwz+cFQiqCF/4Y2lUXnyzgg2CbAIgFUNb1Dl03h8XVfKmxPVg7Y7GQ6GOXJN+OhzlVGZy+rE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.9a7e6d2a.0_1596599164863_0.22030941997997022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.188f3f1c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/fab":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-icon":"0.19.0-canary.188f3f1c.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OfpjFFJsjhJpLKrZIw49vI/zSg2k97fwdfa2k4hcWwNmnQtNt0O6MCtxNt/Aex1LVZD/8GvXZQOHH1WShNL3GQ==","shasum":"0c019fcab596ff339982c8999d678f6e2c780a60","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.188f3f1c.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbKCRA9TVsSAnZWagAASJ0P/2aSU+UPUwYreCRRQ1ea\nqjE0XgfHi9Rz+I5spXLBVnreT4jAmsIoBn9B8vcuTufm5O5bPEQ1jix9ETZ2\niHj2vOf2d6lOZSCc0gEp0Z1/0VO6aki+oKuo/Z660NF6QupRc+v9w/SSTnfQ\nGYp9jxpUtpChpshHIsSc64ytWMA4DJMKi1Q9q5pcnIIxIGBBDB0iz77KHXM9\nSVL6ht3yXnwt4uWW0fLdwjKYBJMBwn8CSiSwhSoFkRne0MWXSDhG9OGUH+33\n6TBWF/c27ni5tlyzGrC2PLSkw9O/iuYCxda/kA098Jdt+fvgdRJair5WlwOb\nast06XA+CfP2H4hgTxZV6y3o3tMgiTj6zr5IkKE4YVWD1sk9gIm5RMj/48rs\nemG0nTc0CdTRnNbKXjNcNYnkCSNm8o1XJZvdSOXOjqmkej/EQ6AktHUP7erQ\nwymoXfHJCfdr16I6/pGjQzCq6Qdfar1oDgdwWCYJo0YDnTI+xqoa0QAEyyjF\na4KA8Tk09WNbkZWy2jFMSxCIPbxEPbKplkQzRMJLN4WmfnReKQWByzBPeoQS\nHHt4Dj/GEsw9kTsb//XbZMXxPY0ywRnKUYw56vUsH3DAbAAddLFWbRnZQEa+\nTeMJFjy6fYd2MUzTiIrr88N9ksDiwrEC4/UocX9FSqkTd0FB3SuPWTsOtOoP\ngN0+\r\n=i8wV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDSACO377RhKj+RNwHbS09HF30cuShww0V9q25JvQw60AiEArK+VqhkM734/R8TmpUTYkTygD0V0H5bbiEogV0wZ2Lo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.188f3f1c.0_1596651210458_0.6468897670524068"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.b6106add.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/fab":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-icon":"0.19.0-canary.b6106add.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AyXbdJZPpQ6bdOyOiplUODZuwOrNYBmGMCkRwcHtI+B4rLjhho1niLPvsANUY/qBhjKg1hrQCXNng236M8uZvA==","shasum":"f69d9e19e7858a12f2f7495d7d351ae2c0cb4410","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.b6106add.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtWCRA9TVsSAnZWagAAIqcP/i4eoQvxO/Z7eWFrxPCQ\n0bPiZWPY3wRjpW/caWyEdcvNgypxOhww5NkwOPy9BZXGgDkhiuJ2VsnT+KHY\ng3XWX5fFfw65BiFNQSjd7oT1lP2YuEAjv2iwXExifVLkOz36jvNspS3twOO+\ntk2umeIdbGw1If0i6fVIf8DbYKzNtKj+r41onuN6odzO2aCtyeZR/q12EXdO\nBka3x5/yxJj6idam1wlI1Tv85RSnBtwfb5nSP0uxUp9w/H9KE/rWAq1FvoVX\n4+UMqPWYjwZbH0gF0Bf1bGdMeMfsJoCvOlKN8sF35BofwfMfKjnUBz/e5uCQ\n33F3Rz1MVdsvQu1vm7ojm2mlNza+BUBCnoT4UpC9FiPDIW78u/Qwa7r9MdGW\ns4J1cG03d0Bz65NzImxli4jFAgzlor1ePuPOwGTlUFyzTZiN+HLEFb5z+7LY\n4lyfYN8L9cEthu7Scbj//38gDblLmZSS7F6MeXSZ9eYMB+Egsb4HXiu7QZqs\njQ2mcZPrMl/67Hbf1ug4BzBoFAbgKa1cdfFgcCA5E2Sd1mnoAejYAMvfrOzE\nmNnXUplFq0D/skhYWnKJ5FAg0ZPyiScG/dpwMok6Ceo9nBtT4sQ5oc6EIIN3\nMK3E3yd0Fr8xxMzdDOZTbO+QtRWxd1GL+htikJ7G9aqMQV6PklrbZVz/GvRU\njPj+\r\n=4pxe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt0am6sVCCepIk5VOgusjis3ymVaMTHt3GHHQEqarWCAIhAMaKb9vDxv59Hc2hNNq66pGw/nmg8REo5vECOtA8EdBw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.b6106add.0_1596660566539_0.3617237712729102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.ebb4c667.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/fab":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-icon":"0.19.0-canary.ebb4c667.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DlnoaLqOTK0XkH1zE45EP/H2NEPP/4rbsJ3WoPJqFH+qeD7nnowSrVqGA4eEF6o9iZaXzCAJklJIhd9qOAYI+g==","shasum":"74779f3bc922a2637b3834c15b09244e7b5ad805","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.ebb4c667.0.tgz","fileCount":19,"unpackedSize":84608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xqCRA9TVsSAnZWagAAUOAP/RCBK3i2XkSuzeTnKG/F\nTx3yx9MBPDZ6UZOSxUBjZrQ0Ap1OpYsLMA2bbKr1YTw4EFE/m4FvCSgncMA3\nPmHw8ODy8WiCysz7oMOoP/RXU7lTIBzIMEZCZZQTwxPgR4pnGQIXbEorX+Zh\noT2QfYZq6+sFw9Oh5VfcCZwuLrD50obpY/238bwy8NaoBCsmWr9Zu7N6Er5c\nxgcsp8soYqN8UHYsu5Fkx5EvbHvGo6WpCun+xUlDpJ5GRO6/hyKzldyF8Osn\niid9aQdY78yAk4LfTAzALxbzcoBco6BqpB91oSEa6ul7avdErCLuFBNHg42D\nXn+cx1tOExO39X9PmRqpvlL1fRiwv5dt3s6yB+axFu39WTKpRgFzQwCxnYGz\ne17AE4DRfBHKXLOW9y2KqMHSQxoPiFSG6/FLzHbFuHv8j1t6ZpS8+nK0X9e6\nCO+edpQ+jYlKJPmhgJ/5nuj8NRsM8NuuVr6Ze7Z/aTFTC0f1tzfklATsXFjO\nWnVEPZq7Yb9sNpmIENaGrIJWls/8Ie5C76NtRB7nva67NhSMu8wq3g0PLBio\navs4ggIP1kw/MnySlDctdlzZatn6IW2HWAYSXHMTRBsv2EV5CD2fJIhO+sVY\nxWL9wH8nbJ4I9NUAKM17O3PR8l7hBF9iTS96Xf17hhGPHU1w1l1e9HWLbjtU\nBV+y\r\n=ctat\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEV2WHkZpyP4uCWwuNU3ixzf1mouBD4EaY+bJ8Ufh4ZvAiEA1p7pAHyghjBED4peJNi1jQOU50o3c3atu2J0mGwWj2A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.ebb4c667.0_1596673130227_0.906556680634391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.aa44289e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/fab":"=8.0.0-canary.1b44b43c8.0","@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-icon":"0.19.0-canary.aa44289e.0","@material/ripple":"=8.0.0-canary.1b44b43c8.0","@material/rtl":"=8.0.0-canary.1b44b43c8.0","@material/shape":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OZcWrWWd+HmWsi/YkhJzGsURMO+oJ1WnHaeYkLfLo6YaYPboD/K5P6ZRvY3BVia1sOL3nEWvwez3xjYZKCn08w==","shasum":"2c03ebb52dcb99e57f1e8ad59bb4491f240f810f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.aa44289e.0.tgz","fileCount":19,"unpackedSize":84774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuSCRA9TVsSAnZWagAA4dcP/2JdvsLNfaNW2uSl2CA1\noqaOCu5gCT9PXsZZlGNr50Rm0Cszv2WEilV5qYaaeJr/W0gJ61QYGA8C+5jc\n5JuHFF56kAIJOyE2cQQV7xE7nLOawJB2nDRbK7ZkBLsjjJcK/tWayxHe34yK\n3AaY7qc8dUrT+mavx0HLmX4XRuPRiAYJIOM1ISPpH58q0sfXC6H9q8ek3Yup\nDAyRhR99yZF4KsCnr9gieNSXCkdV3i8IWWP8O/VrfqaKio+ba+cwrADf1HkG\n22Y+s8Z9eWAofqmqoQbOYKrEhqTlhwqx4uzgKXFpKOpjVWp1Cb/h1NWofgAn\ngmQPSoqTwmV5GfRRLGi9IukDzmTqV2Gc53vGl0E46Xg6YWMMqytNXrHZEtMJ\n79ABBUaH1WNx1+mKcSYv0B4lD4M1m6o5DKzVObQu/COh/59ST9mnharDpyxo\nCT5aIfpsETKaKIOTYPPs+9uo88qVhfaU3CwhgvOproP3DIToiigjJWGMpaBy\n4n+mfNJMsVgZ0T0/xyCGOik0ea3q2nvJI9Z0XsW87w9I870mcy8ZMxVjM2Rd\nJ+X8Osa6qxs9OPuwwdCopIdxG21q7LavH2A2V5LvsnMgZF5oVNgvVIgHIuK+\nIx7hbGqw32/RsSbd8dPnQm4mp7A27st+H/aAz1BHI7PMREWEbPmQBmeJ7UZZ\nNjH7\r\n=e0j4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVNhlsqtJDvj3G8j5km9XTA0nqnOSJvODj7dtTLk8hqAIhAI4VuFbJtvC+4tFP6rTtszK3Fiju8keYKccnyP8ZSF4d"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.aa44289e.0_1596738449870_0.7198171277013652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.e6b0816b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/fab":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-icon":"0.19.0-canary.e6b0816b.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-e/bd1zMmhoVecHWsGk5A/OsZrrEJhoFk/sNrS07DL+LrcfYglLY3QXQbTwpVPs2k6KHPKy6E3ZGHvvL5IxPvzw==","shasum":"ecea96003ae7076d715ab534dd08e565405f0856","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.e6b0816b.0.tgz","fileCount":19,"unpackedSize":84774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDnCRA9TVsSAnZWagAAIOEP/Ap2B0oPC46DritD75rU\ncz9jrzTVHxmu7Q6j2QvBqYV8fTVyfNIHOevo/GLEyKsJMOBAU0fJ/bMqWtsi\nT1v5r1kIgkvPJiEqUEq2c7fiL8ahvpjrGqpOfxbjaj8QQsZOxpekv2pz2rLd\nPePflx29/NpqQGbpinCuaIFiHfb5MaRvIuNtCr1nE8G+bPdw2BcFsIu3Ks0d\nbV923EUwf6m+RLTQuAP5ubylFBD9Ov58UXVEmT1BJn9tsbLAPXX5gjgQIYP3\nBEfaUhV81N3NJqNUIZA695Q4j3160LVrMHfV/qekBJ2KpxLDnUyZcnO0UrAy\nMCTAlSCr13zMB7Vi/8Sk9o5QXz3Fkz+3bOh36GXCq6LXbfCG/SbDCx7zKOkR\njhG9B8OpKdfv7np0ICuKC5oi89UJkpfqMQj/k+TVuYq+6WFXpZ1ciWpSYsQO\nXquEj8XAnpnxxamVEk5OQyFbQ53KvjA7S71ZYQp7nAYlqIu96VHe1yNjIGml\nPdwE/u+2fNYIdPkYXf8KolEf0dViKmcFExpGHcmCYvxFs+fYmBB70j5WJTte\n/CquqdBfXoB1+qa6h9GEHVkuJZkgjtZYjjwq5Ch6MlF9mNvM3WWP45v+3VgT\nwPVl9lXBONT3gf2fZ4G0aIz44K2xTtzE2CZU3A8l3Ar776stoswgiy5c/k13\nCYzd\r\n=CFOO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6JOJqzsVpX6rP3E3gRoTWQDtmLfIIded00Drf8HcGjQIhANk360T9nr454IFGjdEC+HMUXrTnAcS+9U8x3lWHvbuW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.e6b0816b.0_1596825831389_0.1450777066980229"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.96d15938.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/fab":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-icon":"0.19.0-canary.96d15938.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yJzDpH2vY4irVHtg3YppLJfLL3LOTmHRtSgEhbwkuUKmyzXP+K/TTNW8kFS/VzN5tdnk9z82T9G8IzPsMqizEQ==","shasum":"86961a2011be1d736f5ec75ac5abc05b5cc093d7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.96d15938.0.tgz","fileCount":19,"unpackedSize":84774,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmJCRA9TVsSAnZWagAAVhQP/3EfZlJnoHbE89c0EgeD\n7f/52XoNdk+lt6C2CwEbnkbpzoqeASzZK2VCibiL9C8NMfPlzR6oqBzPMiSD\nvdLp0L5iHUOIWXk7peptpzGq0UDyS92FiRTU3rOt+QObGXOaDKkXT8b4Es6X\n4xb93JZXrvtQUzeVNoTJhLc9zl8AiilKsbdvs58pe+Vc0lAUVgA0d5S03TIO\n/GYGNgRfDXfbZQyjWHYpr87Npu9P75Soh6WaZaGgBDHW4hp4tNo2qc4/+aL2\nGloJe7IKkq0cGL1LLzYdjNu+whN+bnAZqxQD5m5c9iBBHOy6eNmeo/o4Gv/o\nRBYXmhwt83PKjKlVilSlL4TC5nnUBDBD4pDvECZatt58dR7d6lD95uGgKikl\nMtH/zUS4UNc4eLbp+6plr5CL+Mz+bUdAi1AwtJ8f6b6auqguOfKJB7kvmS6M\n4nCc6HDoyDmjjIKPzCtodsbFanwIWJZAuI5knWm0hSlnNLjTCDNCzFtQkNW0\n7C1hwPAkGlVgjF2KVfNvqAuTXcsDGqkzb1eiY6CpiMvscGp28W6ot4ipYAgb\nu+eJiDCDQqrX1BrUtvh6scf4JGXNNczf/FeIjUFQNVbU8yUpeMLg795yKbtl\nQMK3dYlFrZ86m76Kc6PuxHuh1XavDATfDfJqhiAkQID96UMWTo/sN95Xvquk\nNVpa\r\n=kDJQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZrcZrAcAbmyzQ2Ao1FgAuw18C5WBewNzuAmkLRK6a6QIhAKBMqn4K+VZRGqa2DwvuYUTcGnmmcYtEonwkhBxP0+xe"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.96d15938.0_1596832137271_0.29196374874847386"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.9d991c8c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/fab":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-icon":"0.19.0-canary.9d991c8c.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HUVixM3iVrPsn0JY+zg9gYwU/RQpxWkXgH/wos/RNytMQ4lYmvfbejMNykINlbLHAlbIOAefx3TuPvBo9UUXUQ==","shasum":"1c706452e9b9850450fa678a607bb65ce2ca73bc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.9d991c8c.0.tgz","fileCount":19,"unpackedSize":86799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDfCRA9TVsSAnZWagAAozkQAIQlJzlAiEkw8k3pES05\n0cP4mGn4krWnwUZXHXZUCCNOj1M1kMeOYfbNHu5IB2KWbaEt7nv26EkO6Fjv\nSF0laEKCxXRuqxpDFekubtR1SZUQfq7bejq4czc+jEfZ4tQ8ufk07VcPiBJm\nludP3pByIdablpv7lWd3OxgIuSqC9CJLLd3lkE6T3Hv4mdz4vZQDTFjYJeqT\nAVgi7ourAdgZE+Jk2HjfirPpWXOE29ildk1CGS071xfB6iqJAnvcVWIF0vEv\nkgm6RAme2mHDXBdnh3JcANv5yqvCJvAENcZ3c8p90eABHeX/CCCzviaaPoKd\nmORctx4MPyP4VDBvbUSrIsj+fiukx3um6zFx8KoNh7wjvmI7wo17m4GhgAzW\n9Gho/Lyl3Y9DK7U2+ATOlOFAYtc9kohaNvtEaJOZZZPcP9yaLqaeNMjVXjwx\n8EmmZoqUAVC7XZyzlKFqoPx7FHERPF5cHWWS+x2CRiJEQdRFG2rznbXfHRal\nK2xWQf5chEGljCgfrmN5rtfLs3rNjgpcXlshnxFj6XMgLS/45wf+NGkO4WV2\n0Jg9o2+2kGbysjITPOuagQ1n4Tdh17svBZkH22jwhlRaiabYGCagk7K3448v\nn6O4HhdjSQY71NILR5xitFcocrOzi4oeJ8T436n+hQ2e4mxJMckbGcZO5Ziq\n1Ala\r\n=MfjR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/Z9LuqyrXv72XB0zaWDMggUuRnqwIHCQgQtoDwhrZvAiEAkxNpXSBFoxeXl5JX4KqWTW6qCo6OCStl0D5WRsK8Hqs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.9d991c8c.0_1596838111305_0.8661475919019426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.13bfbd72.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/fab":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-icon":"0.19.0-canary.13bfbd72.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oBN4oG6Y2BdtU8In0oadKR0KpgfJXo8XOlZ3sRX3C0DF9myRD/8Y0VsP632EbZb9o3xybwpDM1GGqMr7lYoTaA==","shasum":"dbe625801f7c76f2007d0139f1a85fd48a16c7a0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.13bfbd72.0.tgz","fileCount":19,"unpackedSize":86799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+iCRA9TVsSAnZWagAAOUIP/RnHEZk4lTYO8d9JHtg6\nPzcGfpbsJvRoXSPInpDMzWu1geBRGY9yODa2X4CjT3pVsJaY035Oomc2Q2iL\nwaAim+fFeVoRB/JSeQoYBXXraJ4Rj6G8DPnDnkhfWPGlB5NGAlDGiCeqona9\nr1zGAenQImy1Nk1iKXb9SY1yIyz/kqsWcEaSYjQLuYCk+mA8aHx5y5g0LbeQ\nb6vlp3q+Uo/jhmJRfa4MFgwORiNBBBbm5+1OOIjQBgrkDWUTRPxGQSdirlsI\nIBhg1V1Q1GJigruVei3oLBN9YzfgiWfrwV1evlamlTSntHsaBwp3vKT8FPq8\nM7647+C2rvCaNHoQ/1fAlPwsqIIUaQV9xIKMrBqq1wEb86jZDvyexFPIl8Ef\nSz6vhdHGnYhLI+VX/rl+as0Xu0EKusbeaPid9qVNcY5OITQVhWN298ZLS1+l\n4foj3ysJ0G/bMl7JT69bqVdb0D+PnZ0EhXVNEH2ILo2cPhhng/XvKNrX8qHp\n43mrs6MV5OvTAhFYZejVVUlLQGNIiExdwdcWyhPYQz65EeLd+B8WExfsQIER\nsm5fB4o6WZzZrwlv3LT3Ay52F5Qv8NQ2I5wzyVxlby8Fzd1m4RYG7lNhYMlH\nrIP6dP7L74kRye9HNUbxDfKMwaci6J0pwnYH/R4N819JlYvwYgkx4Q/B9gf9\ncrD8\r\n=t6We\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVMWi7CXX9okJzBYHmZrcNsp06L9gaDeRhxqWwjpoJ8gIhAP9/pk8pQoEjveAIwb/zdD4yIlrFWEwc+NTLdXAT02PL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.13bfbd72.0_1597087649706_0.5912617570874235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.30b1b258.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/fab":"=8.0.0-canary.96a640534.0","@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-icon":"0.19.0-canary.30b1b258.0","@material/ripple":"=8.0.0-canary.96a640534.0","@material/rtl":"=8.0.0-canary.96a640534.0","@material/shape":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WlIIkJLtaun7Pm45QZG7hK2ms4YeCOn68obxgRR1EbDvk/dSEA4ZqDrCm+WHcAPN4YrZWlq6UesJ/BHraeE2eQ==","shasum":"854ce0edc35d3db9752b68b9b9488bf37e697ab4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.30b1b258.0.tgz","fileCount":19,"unpackedSize":86799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajoCRA9TVsSAnZWagAA3tIQAI6QceI6uGU2WVm+mR/j\naDTpG0kXofZmjxuxI1UlRKzPoq12/GojBjsP0TkHYiQLuMP8IPe4uo4fbRd6\nouVNkCTv6rrsNkJ112S4U868qW+XvzaOgJl0VnfSBIyoiXCJBkRSj0bvPg42\nytIeBJcmRCDNqvqmkV+HayyEgV6lHF84g+nGlzMLfKvqP2K8DS26G6Ku+hYx\nLD9hOV2u5JKPv/uNN/+oyc6mZSHQMxVsVIbPPGzfQE5jLbFGs5g3lPtmxVMy\n0XTb1dYwy5n3rEkVzzTxnow4zlH7NYMnUOYXDWH5QZjIYtpYuAH3VFl7M3GG\ndW2EOS7M3teRJRT0M+XsyCIOhzLw3jvERPLERm7f4i4AFmaqQyNn4TU8b+Ly\nZa4pSZCXYe/ZRRi/B6rcWgyOi+pb0cHhXYOfV7H2ipsTQ+3g0/O2RJ42OeUI\ntCk+iyibayr8AFOFKx6GRrZKMLf5dysgsBWaDO0YAXf95EgXtV2SFUmhwed3\nc273McESQVjo6IMWklNbc2vfrbgUlyM+kqhl34BuhYRvwIEvBJzwLOqxRg8f\nSiNQ/ePqVOOMzXe5xSzmEDEABG2C7AEAwpUdnTMtOXPQure7GShbyLbJoHs9\nhyWn/TC6klMv0Ie1irznNrCrszjV5fZ9J11AcinUA79B/9XCNfKVHYO+x90h\n+kHz\r\n=lmd3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFRsIaHyPMVe31opBDaXVm7+YzzT3JoADskCvbbZuPR0AiBEMMJiR0TsyejXXvSLjM6+G0DdoJgMr3wTJ2jPEzUg3Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.30b1b258.0_1597090024119_0.5300710768393453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.1583e263.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/fab":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-icon":"0.19.0-canary.1583e263.0","@material/ripple":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cEOLJ2HVuDKTl1DxW3tH4fcGq9v0z5iPZpf8sTaUxRjMA+0rE2CkipT6P+UTjB/a29hhHyX17Vq2oo225B250w==","shasum":"df0435b7de6d904890efe8c794748264409bfc5c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.1583e263.0.tgz","fileCount":19,"unpackedSize":84627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyV4CRA9TVsSAnZWagAAQXAP/2GlmOnGY5mwRCoQoCz+\nrZT7Ugkepn/2MlYNeNw0G9hbl39N73At+iRNKprMyIpqsNwA/fEm9j8Kng0u\naAkQ2McVi4+IMfq3s7KceVGEdXR58kXWm36LvvdDLNJ+Fg/CW5swuUcSppTQ\nidKJTSsxA9ggCDfSZl6zqsAgAAoWycW+rC8uQzCkw48cmPCzyUd4lBJBJqIL\nsfyGgg/SIXr1cXA25skhsenOiqRO7dI7DbgzV0fy5Re+DJ3zhJTBPP0X/Xgi\nU0Iv75SLMz93TsbA+BuWBc06hGqWBke8yqZeC5JKH6dK0YPqpwFGmhbAMfwm\ncGldNam9qCi9nC9kt6a6dUb1YEw3aJaXF/QCDKeA3UTWOer2b2OVnwhf/7ZT\nDyjAMNezm3njmgmQrJBGBoRM5lJfO65jf+3npuzS4CXgaV/6UFIeZkcR+v4d\nHO8mDpm0tbZlnHV3/l/J5wOqFxg5r6+aO1oeS/biqx+wB84VGWyLGoLnABkC\nyAQctyiVklhTeatwoTQAwcqlBhA/nNVz/1Gdy+knG2ECM0aFYghhiTNBqHKr\nt8A1E449yAJLaBZ/Ux7+ZOyNGmEZALqlpjytHQj+ewYuzRHRNZXSuboZrNid\nDkAuCF/icuXUKbINfxtvx+1rrj3UhEkkecuXXmrBUKHYxeoI30jsOdj7elvI\njO0H\r\n=o8od\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0zD99yUox+xQ3GnnU+KCPmLWPVsg1pKVau5WbY4PR0gIhAK9HZ7OJrsLYpu3fnks4pL2Smb22/NNIsjLPeELNpdIG"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.1583e263.0_1597187448125_0.7726204417173836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.fefb1a93.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/fab":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-icon":"0.19.0-canary.fefb1a93.0","@material/ripple":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oPurg/j8uJ2+bxXd9UrR9f0DKGL+MEwA1ZJzA4kOFfRR7EGMzQu4UTwMVsvkxNVy1ZXUqtmua828KLJCrqm7LQ==","shasum":"9f13c79d08056fccee3f7d0b8d204fce836e2bb0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.fefb1a93.0.tgz","fileCount":19,"unpackedSize":84627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbqCRA9TVsSAnZWagAA9kQP/0b1LlrmEnNUmpbaHfix\ndJ1aJv00h4jeOH9t00WYMLTaGFVwijjDVpge9YjxEaRazk4+ZZI2ybphbo8h\nibpUzf2L8FsiUfjt80GCIzEdIKUN8TfS7JkwIcQLC6d6n6cduh4MSdgkA2il\n47qAUv+o4+3fqYWRfNTMLzAEgG3OVPPqP8EppFgh7CMSdxzZPblys5k55JyC\nLLyt+djQEHCivDeADKTehzzCvnv145EZxTmLIeBsIlZRmsA+sWig2Gazz/VJ\nS2TJgC9XDMSmKHuO7dE2DnHzcG0S13GZVlYwK/3YDVySnH0Rip6UeV8eqUvP\nKESJV1bY+ngOWnB4SncandMvbI9r9GunZ0HCsWU7WliI9zhtXFGuq9/ea+r/\n+RmPxaQWZPc97Y26Z2jmhnnKfHkhda9Hxh6rkTu9qB5q98kcfJ5aRCh7Rjrf\nC7KMPtGTdtB0XYLrBSkr772EG70vLnlKDU3IjjCFYt/o94LCP3wu0IRSWA7S\n9aqxf42mDhz/2apqy1Zfs40SANPO236HZJwpP5ckm8lm4InRoX2flc5cizoy\nUnjfqYc4KaczVbZwwW40ad1/Ud3UTaRRH6Qd75+keXuQjKOBuM4Zc+mhMR7r\ndLWMBXfaAxSRlE31s2d+leCIMx4vOnghDMZgI5408quulwvQOKr4W3iS4gDa\nK1QP\r\n=GI5u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlnYczF3cQI4hjca6z6f+M2e1S2JnrrRe00iSocXrSIwIhAPxR2rxcT63GkiFX5sQGSi+XZhmcwzY6+jzSISTIOW3C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.fefb1a93.0_1597191913559_0.8446307009640446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.1ac5b9d4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/fab":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-icon":"0.19.0-canary.1ac5b9d4.0","@material/ripple":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4B46/4PbIczm62mqe6YRXIeVigUxKyPb68Oq9vm1+kpQ+Tsvt5P9fxr/PIO8km7aNAwS0Xu0D9r06eUp2Gw6yA==","shasum":"1fb81e7fc6f49265bbd5e4edc1052dc54af52efc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":19,"unpackedSize":84627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSUCRA9TVsSAnZWagAAdVsP/1DPZSCCuTmqAWMmg8xe\nvw0ND/0HlQ3Ig4Vw3CcwHRvHMulSn9hOxYU3v/+J3+bR2IeoYYisiB+LMUYk\nNt0Lwa3Az5QaW42rl7vZwxCDNwliw0trlceiW4IiGJz3Q8T4uM1s0ck7UoPh\ndzMb1nBlidYbUQ8LFx0oJrVpSV+yHBqQbS6HvlpZ8ystMC3ZYLlMo3ndBVdT\naSOJDi/UJCYpc2k2aFRSiD1gLXNG+O6jwGyGAvQHMrmHSQnlzo0P/aWFCqZ+\nVefoMLS/i744mfOv0PjIEWRJOMrhskJqgk8J7ojrmDcNK4AhyXkQxfHKJEjE\nwNGRMI6fkexBhAY5W8Obh3u0WNxRFtYVOAQfypKxhcDwp+3BhNsudetaku4I\nRiLv+7K7u0TI1lxCMtimLvOqTb/3X6y67mk/Gz9AVXo5A+evDljT7msnHinq\nbW9ZXU+hSa5YN1eqT2s6yVTg+sweAzbS14f7JMCJaAm/fNpa/bZPDlOpv4if\nH0eia/X/8mYAhDc9+/ijK1lVyTHZlagxON1q3+9pLxg6QO2uCxQ4y0Sa0+mo\nAFzUY8TWGhAT26wogga25QixZyIeidpYE6XmrzT8W9v0Fw2UJVRbQOKCUuYX\n7Tk1WYLd1XVETonRwhCjuPrdOGgD1yOZzhU+LF7+IMF5gw0l6nwo56lbwC5E\n5sgI\r\n=cFYt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF15NLFhRbpxlRuvZiWeRQM0qNA7NjTxI8+0DXBNDqetAiAzJmIpyyOL1nfDyUEWx4WOsWxHYyLSK+xu7S7QEPhzOg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.1ac5b9d4.0_1597256852488_0.2712961572861883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.f17f5052.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/fab":"=8.0.0-canary.85a5272df.0","@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-icon":"0.19.0-canary.f17f5052.0","@material/ripple":"=8.0.0-canary.85a5272df.0","@material/rtl":"=8.0.0-canary.85a5272df.0","@material/shape":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gb9b7XA/NU2P8JkxlaCvKHP3p0ZCZRh5T8b6jzzAEZWPRlxWqFhlecYSd0O1ioeOYUzUd9BswrCI33m+71qnQQ==","shasum":"99caa158a4bac55cac6d0a974758885d916ebde3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.f17f5052.0.tgz","fileCount":19,"unpackedSize":84627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXT8CRA9TVsSAnZWagAAJ2cP/1t5hv+MGCULqgMHDx9v\n7gJzsUAztKAjZd9YCY3sGPQpj5cwPz8JEHUIhlPBpnt42V8YZYJVj/bPH9Gf\nJ/zj/4RU8dtQa9arWhRo6bqvuSFhCZe3NfjL9N7LuILhJ31U1swP04ZlO+ea\niRGJdcutQ6fF3pys58yE6IcqsdCUlqdb1wUBTUldZXdaUYI7jFkhm3PvGxtZ\nsmzcMFxVD8OG7BHUtvFyBE7lagGWVz/1cgkQQMU6XqC/rrVaW1nvfgnkiJxZ\n5q7cfT2j6fXfWV8Q4IfAlhyTudEKRIU8wxY4SJbIA9UvF3Lm2vKKO/vUUezo\nTmgDMKxsvExBwXENoCdsSUS1xmVlNYbOo8skechjTilJSwf6Iw2827Hlt/En\n6LZ4wGdpTMxO66UtLc8uOr44dsmLp18rzIVCIRuJYh3houv1jU3m6SWSE8nV\nlg9gYVTj1MN5GdLOxwfP+YbfHTpnH6KDzbsSdcJ6drM6YwhpiaqdWQUNtv4X\n/EBuOXo/GQ3qNnOtA0Mst2ZAjFSwreZeRCK+Sy0yCL+j/tE6oNd931pm7OBo\nIMSajsXeq0vHufBq/JBu3L8qL7Ay4pIDwMh1XkPhNX1S/n6nHmvjQ4xEQSBj\nACHzT3H+nbDxIN7hvS1UUSCXUoZjCZWKhpeBosiVKf5RaOzU0rwjb295/akH\nBIA5\r\n=gR4x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw6VMqfdBR3fJHZ9HM+uf70EKzBxcRb1fwoQt/38A6qQIhAKCooNNABo4K3LjG+KY3veyWKGO4tEvtbgiElLidGJtJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.f17f5052.0_1597338876435_0.12214219082468691"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.80b5d20d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a1dcfe97c.0","@material/elevation":"=8.0.0-canary.a1dcfe97c.0","@material/fab":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-icon":"0.19.0-canary.80b5d20d.0","@material/ripple":"=8.0.0-canary.a1dcfe97c.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0","@material/shape":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JiICev85MxbW/wSrMxfchUqm81oO0NojvAL+s495D+euL6vG9G8rKqzz6mdvA6QYc3D5TusUaz0EzDvrOSnBmg==","shasum":"aba1502ddbc2d962e1f31a605eb2b14e708d0ec8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.80b5d20d.0.tgz","fileCount":19,"unpackedSize":84627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOzCRA9TVsSAnZWagAA3hsP/1+F7oSETepKH2XVoWPx\nIVx2Y90wSESixAE9JAqdj+74e2GH0zER+SzWxKqiQLowo409rKyfwqRs5O//\nUoA8oHk97PkDmsSjbY6voWf9eUZLbORCIrHS1WKswI0rMz8ZZBVmKYbMg7JZ\nO4g2Krzad1X4k2v9frakpv9ES/0RBZAoa3Zzvl5RKbBE+u4XF9S5FbCfxQ67\nVw+lFTgsoc9XfUUZalMpAmdRlyu1sdHdzawE/M+5xJD8FMhzBJwIjNgVAhTB\nDdwxP5v/cNsHiZjJVrlpE0t0/B9u7JZNcuj5pS1WEF/0kfcwgVhpcUqTqGw2\nqVQqpFdMWsf9AMmg1wIr3infcFrjrNiBzX71n/phk/6o9O8Re4JBE3d1/+Qj\nYTnv4NtLCxrXNkWkDgZX7EN2VV5lTuTxfa8CK+Vf3yWx3W+rUB7kb+O8xxNu\nHu1/hionoYjd4WywKdhFZ74uj5WjN74/+Tcefh5OnRkg8RJF2pKlaL50Iu9X\nunC4yjp82ABU9IgmLGPWr8aiapx1s6zw/UbKQURgI5kgeasRTDfPo7+6oYNy\n9CMUWUhSm0ptkOUwzBYWvFycG36pxuyyyJcWGxGYxMPhwXKfka4+fRYkINUj\n6t5kqhv1tUj/n09YVNZL5uCBIHPzO57yyUDJbAYcRxz7vAT+TFOq/q8aBVgI\n04uQ\r\n=j488\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwNRNBN5A3r+7NhO80ZfvI1HpmGghcNuMqiKUf/iC86AIhAJCWY2iaYvv4bJsH2EqZnVU+m5A+1S0v44n4Cw/uFTog"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.80b5d20d.0_1597342642691_0.26340907794393376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.758635ed.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a1dcfe97c.0","@material/elevation":"=8.0.0-canary.a1dcfe97c.0","@material/fab":"=8.0.0-canary.a1dcfe97c.0","@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-icon":"0.19.0-canary.758635ed.0","@material/ripple":"=8.0.0-canary.a1dcfe97c.0","@material/rtl":"=8.0.0-canary.a1dcfe97c.0","@material/shape":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZWhCKvH6/iGQtWQ99Iay/Ehf9lQG7sHfzQoDEsmp3U0dMrvUG9aMHoVdOc0jkkgTgHdh2bWOqFrWrTIGgrvyXA==","shasum":"93e2c11c1f905dee5291d3fd057b67b67ee196a6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.758635ed.0.tgz","fileCount":19,"unpackedSize":84604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsb7CRA9TVsSAnZWagAAa9IP/RsACJZ1Io++NAIYKtyw\nQao8YSALoPpi+BvC//4at/iKjbW7IQ4+pLgpSx2hK+IHtSyl+NhBOLTyDrZy\niS4sZ0mUdfUJIYH2xFBYblMyziY759+hZ8P+gaRAUJkBowMLBorrcd2kl16e\nAlEfsFrChjDwFVzZheGUsOvPQHnxGpI2HpY+ZgQRAf9k87l+zARkAXUuV4Ww\n23AekP6gHCodW+6gpOeFX6eyVAsSFxPDOFVqLyFEGYMJhWvDx3cQCL9fXgCp\nTrc834Bzdo3NgZtKW1thEgisSj/tM7z6Lja38qrQ6baW2SnGSFlI+CKpTicK\n06OcdCizt0j90LbFAaGQv2nlf+TeXE12jt56YKjeRKlMquWqdmiMkPN4Dce0\nBhP1XKKKLktzWp79RY6z5oNkW1cfq5f1rOdL4mJGlvNPW/eOzD7xE5fiNUx0\nDPge7obcR+kSpq5Zlr+UnvuKHcx7w24eEhUBcMN5kDkO1b+lp90qKE4Deyr0\nS6CfYQ05zo4DY4BpXth4zoaD/pwOip8qRgO9cBEjpfM8UAjQnR9sKXvwdOKK\n7WX3sCilWQntgsVKRhnRVNU/NgQHc0+R1jeMTJb/c+F/iWStHsvHP65ssUnk\nnCGA3JmHsOSlqyiAucKoTDo4xhD2cWhtPk4zzlwKLqnhQZtskWDh24VXpnwI\nKIRt\r\n=fIf0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGPKEn5v+jpC7QL/6Cc5IbjepT+8HicogZiRBvCQkcQxAiEA1bQ+oYR4Yo3RDImnEh2h7LH8OCFCp0Nhjmw1f3oJyso="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.758635ed.0_1597425403117_0.5710315670053954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.18d6b808.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/fab":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-icon":"0.19.0-canary.18d6b808.0","@material/ripple":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/XvaG+BBK54vyN5G5cJy8YC8sXFCvijIM5FQk7LHcqyk6JZ7o1ZcOD5uvVpXurvyHbv9X3m905jB9WpgpsJPvQ==","shasum":"ea9c51de63229b637909e0fa64166166615a3882","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.18d6b808.0.tgz","fileCount":19,"unpackedSize":84604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlYCRA9TVsSAnZWagAAU5IP/0sG7NDK3M5ym3uyKb/j\nYCW4SfeKy/57iVZCtEqaRwTvmx8Ht7KdPrszj9s7wkLlta+fSBVQ3zgdn8ZL\n+gyZbIHhNVPw0+7HGqhL/zbenRdsfcNFt0nsOQkYUF3ziH5fWXeR/cpAK053\nHspfV9/QHufqWjGDSF7TfQ8LNyCOuKCyF9+EFB2cvrPpwVOWZWT2djbStFYs\niht8MucO7o8k5sonkewZU9+f4JMfYzFbAh2ckHCxWoVxzA3+jHynDKLeLm9V\n7ZaVr51ulDLIF5ZudRivfhSZKmnhALKfdbeDB/HSwh/QvZGrM6ULDNXDcb7p\nikr+lHBJF0HBPZDh270Ev+WVbjbcgQUJ0JHFF2LMcLdKQWBp0uykxqkuh/Pe\nKq7ZSECck+COWsibRDIhD83/DxJj9nfWLUbZoTrhn5zrrRRn4jw56PGgbC5n\nBuJ5uIZaIWF96xGUenWMYhZPqviQBoa5z6s2v2Dxn27f4Mas/ZMU77/Y//x2\ng5w8H36AgYJCBkOaSlNvM5426YH9JMI4R+sJUURbC0nV2IhLfoXQYo3YB4oQ\njn0Rj+vs/kTJkrh5bfy9bET58V2brdbxrpMHWtmGw+uzX39b84rNCgK1ZGDW\nJPdhgeiGi8roDtiopWVGeIk9omNOm4Ogx+LgQHR3qXKxI31SzvI5CcVSO4oH\nK8yq\r\n=iUWU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqf84X/sFQ8I2IqPVzNSVPO4KMDTtr6XwmEZ+Nd3vRwAiEA5DVD64wPmQCmv46pjf0zZHjLLvX1tT00FT94Y8GwM3M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.18d6b808.0_1597446488477_0.6271687477719894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.5f8ffbd1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/fab":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-icon":"0.19.0-canary.5f8ffbd1.0","@material/ripple":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CgJK67fyXtCn12pTb3dk3mzsJ8HaGTXhogkWeDq/Yq8dNm9ulkbX6bKkwabCd5WBhWu6+8zi3v7mR6ZuNw3GBw==","shasum":"b228d686d53842f01ec7f6a722c5b17414c3f0cf","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":19,"unpackedSize":84604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGHCRA9TVsSAnZWagAAnmAP/juT34YWEZO2cZusjxaY\nZJVYNmv04bI/V1ZFCP1OgJIl6Fx97b6A+EoxQMMM3vlI5UDLhm2C11bZAGj3\nbJNLRLajDDD2jMpwN0wSWG1F0rfL+XA5E9t2serhJko7coiODyo17SwGSL8m\nQiGwAd2MsUGgQLoY/FanWROKNas3EMdqQ5V8L80ohRW8it9D4G+BgVEYrXhw\n6n7mIO9Wrnrp/79AqXc2Uw8UAvzUuZmU+wkVQxzMUND0nkTCCEUVDeu/g5J9\nVqfXwF3+y5hriubaCiptazmqBDDYeQJZwurXWusPiOQ+uTeMcvQkahgHpbmP\n4libqZ+YaEGG8DeOiSeUwQbSiWQHqMwg+tZh4ki6D4gFPmfJE5p8CG4H6pr/\nKeIm/+VFGLiictoLMNSZ17nQxUYKu71RHTeb3YMGXcQ/Kvy+sT9J5ZTnoSR4\n3sSOk/MU5xOHZlvFPlb+gjMKwKkB7yIZ7o+k5gvooAXF1vNUVeonbxZ42eOj\nCk2w1un7U2BdXywfibtuYSZdiiAjm3gglviTuXGja+JeHFTyLCapQ2JPA8ip\nbdgIh7PQpWkKvIQP2xXAdAi9arFm9974ORXBtwQH/AB9c5QC4+uCubZpUaBR\nIInqKSKFVLPhGMyizhJJdbDEFle33O5W053gyDczXeOKu4bUOiU/VJt/c0gn\n8qL1\r\n=9kmH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDg2bD+urLr2el8mk+kwnilfQbhNMiBmM3K40sjpw2+5gIgPTkjpUtNeP45q7KJd+mP55v/hZgzZ2gVdhVAM9XHrMA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.5f8ffbd1.0_1597702535388_0.3847945563613926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.8604d59e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/fab":"=8.0.0-canary.150f427a0.0","@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-icon":"0.19.0-canary.8604d59e.0","@material/ripple":"=8.0.0-canary.150f427a0.0","@material/rtl":"=8.0.0-canary.150f427a0.0","@material/shape":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-s3Vd2CvwRjepFJRKgbdrpvyIw/kSpkdqyQ3SUbN9O6z3cz0+uFlOcGdyyzcwtZkqc0afV1JU0/eaSfCdmbmdPQ==","shasum":"9d0d9464bd80f5830ed721944c396404ff164e96","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.8604d59e.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyitCRA9TVsSAnZWagAAC7YP/RBaJQfyHSHvpdUO1Xvi\n3WoSMRT5Syyl89C0rFAvu2B+DGzHYk6YsR2Mt+kxOTyQWNPolyovZ5R1sDsV\nJKZEUdQXHxdjLdgVMi51TA7mB2VkSMexk6xGTQ3y6Oz4QJk7emoEsvo54kY5\noiMqiOkLmYv9UXxqgRqGHtQmXu8zJOznIUI9oumcojM4LGhvRTZOXy+hNoar\nAjUqrNUtVzGoGzM9glz/sC+eRTabW+t7jKWa0sr9GuvAwS6EjryhUU550cvB\nVS5H41lbdh4VDWW/6kAVbbwoKxcLvsJpgfk3k2t71ydvbjb0cDgHwpanP4wz\nTCqSfCg+o/FjMU8dliHkf+9iPD6Ui1VIQqu/qsgKZwSiilYKsD5tbxSA3LkO\ny/znM/+Y4mLAbsTVGsc9EBv0zNFmRBSLAbyPU5+EDL9zchQOFxKcS6yRE6F1\nlkvl13vHNWyqJRlHNHbpGI/xa176XQwcOvZZCe86EvuTINtA0rLJkwxh7rPe\n3KPhju3GoW/4IOxpH5J6pk0PX9iOKNzA2sfe/DeOzFkYEQ6yYR98egIdxjdF\n19Jsp1zxW3v3rXJEba3Oa6Koo5H+PzHUZrCkg7Pxwluno0mTlD4moX02CaGg\n9fuQ7AFaQ5qPYNKJKRC7AgzFo2NLNjCeudRIA1HMMEDsGouPRd8UOFnUlrVz\nL1Uu\r\n=NIsA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9wbZ7I+WJ//YwxnZVbGPYZuPZL68BIui2UGCQA3iRmAiEAyIt48Uv7j+seyqpQp3QxSDBnylqjhjDqwsaTeO6I+ac="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.8604d59e.0_1597712556736_0.497270296701142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.1d7d5e34.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/fab":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-icon":"0.19.0-canary.1d7d5e34.0","@material/ripple":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pKcI7Gx4hvrU7ycDXwiirOMkRvp2oIZF8ZYRlOEva8QLFGkwtMeEbJCVkNVfhq0kxMd4yeoYikJMtMr3K8ouQA==","shasum":"ad94a9a00725d0879a1b7e500918ab8985db7a68","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.1d7d5e34.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyoxCRA9TVsSAnZWagAA+H8QAJeAu+ZOJe8r1+coN4xC\nN2IcYqj3Mknn5UldDkVrs2a/oBKHhXRFCV8K7CkQyZmcVzeqWEYq8Ggz7pmm\nr6vXs5tqnab0kcukIKeLu+vj/g4lzKVCHV5s9RFKEPSW8clH+8MxeLyNyg0a\nK8yqBfcwZ7HznyGAp1YIik2QsV5FgRHs57knh38SguZcDuhUaaeK1qsrwM6h\nkU0K2WBe6Pf7ANkN+yYozN1iAUdUysy7x9KJMniFgo9SXuEzgjkydm8Ggj9q\nff8lbR+clm8TK9ssHKuvR81QkhYnSkD4vrIlixcH2VjDHaEUY9+ywGhsOWtM\nnbKXEpKe+lpF6mT9NwPBX6flVRX5xC7dwE/qQExkiwPwKNNaDfDgP9VgOu5D\nPjO2xLKPvBYqBIxsI/O45LRnNzjGEY8WIRj+AmtRa6xFRZJmxD0D8g3veKSe\niztzu4Dk9OXPMTSy/vW6uj6Nc6Pc2klU7ypxfqgoIhL+gSvJWZOs/hG4Fz5p\nHv4wkfXT2v2yQenVWJh9W0hBMDTc4YbCt+Kd1d1WfRbY1S2hDfcLIJhW0FIH\noySNzItZByrYTSf5K8Qy4YDm2JuDkb0swZZiJBO+enRJrqxGb/ENgbfUv5Gq\nGXfaD2YUOsTb2lr3GJAmL7X2zdDvTNge6cW2g2F4h2ACJbOVTHwwyloXs0tE\n6YT3\r\n=f1uW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFv/bOWNl+L92k7+ZPX4tuWdch5eL6WUFkVWHYnG6qCQAiEAgIrs80auqS3bDImHbX3NofeG/PYJ87sqUmxWNY5cr4Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.1d7d5e34.0_1597712945553_0.7581941958334228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.9cc95c07.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/fab":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-icon":"0.19.0-canary.9cc95c07.0","@material/ripple":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RiVKjDIluOki2LskXjHe0wC6JMLIoc03/30aoxOrjDjpFyDCmwO9mXtAh1UT7RTsc/5eHVZNz5IYoEM2CAKMjg==","shasum":"0d6415d69c4365afb1bba503467afc4bea9183c3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.9cc95c07.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyv/CRA9TVsSAnZWagAA6OsP/1+Muk763tI5OtzU4C1z\njNVVkhLhbTeRP0iUE/1nz+VdtDmDEFUVue50qfKOgob3V6Btmp8JectIhcwQ\n3JSmb6d5jPSurdJbpL4dtmF4j+9qmlhEIyuTtEjbypO6Pk5TwBCfjlOfeP66\nvz6Ogj5fTnBWuAWB2kpE1eClYXKJrv4W3VyNr1PomXE1ZCZ9XlUQX2g1HLIs\n+8eLsuyTCuKILhk+uu7SxO4nuN570pCQnY99TL4OB+VfcwTQGep9A8jZw8Nq\nfC6SRGs8w/KU2SiPN912gw8YaXc1Fz9GQ0MgUTvac5RLcVr6VaOutLU/Q+tg\nvrIh+9ZWErSi66b0JzYfKljZgnK15fRxZ7uZ0W9dcoEHoHIJTqeAzYLLI7Gr\nswK77zpLl1v5oSkbUOL8T/HdGU27Y4n0RxPL3WZWDROdHEMU3r+vGZ+Kel9D\njclMomvNBGuQ+mECGkGXtDSGfa5CL5wLOrz6f29QH15fYGMc4asK5QC/trjd\nOreXHYDNEBwDSsCkEhqTgrLsCBDHwujqpU+VKMmCprEx0b5CUz403dGves2O\nDWKeuX69oKZV/tTNT6slXVv4vI6m1zOIvN73TgkNyaHkWXVLL9b/twaOIRYL\nR8dzjbnvQlQLl2EyI9EKWZhrZHiMzdIx9ZkWX4m3H3zxDyqUFWJQSxRr4IMp\ncUK5\r\n=JjVV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYlryB8R+sLs435UDdfLGwmGOFn3HymWT/Ntxsn+tzVAIgPYHFUQLb3iGITrwgMZRHrcuyDtxF2ev8PvVXhrK3gME="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.9cc95c07.0_1597713406854_0.6469728455992063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.9f65ced3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/fab":"=8.0.0-canary.defa599a8.0","@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-icon":"0.19.0-canary.9f65ced3.0","@material/ripple":"=8.0.0-canary.defa599a8.0","@material/rtl":"=8.0.0-canary.defa599a8.0","@material/shape":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TDNDpTTDqXnIU3FIZwnO1k08UKzOTT1/bEU0BylnQuwxyD2AR7Jl6vgUUX+fMfBCcz7jzZft+FgqaFSP3JxgjA==","shasum":"da3555817e41c37885e400442fc6472a43df4b63","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.9f65ced3.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcMCRA9TVsSAnZWagAA8g8P/RPhlB6u4Fl5w/mYo4nw\nxeyqzYstnsAfo69KNecyGoLvzi8FSpljBi8Tg1mDhnNOjFpwEy7PrcFK/IEm\nVXNMpMkZnI8xAKj2UsT2tf9gtEgEoIJJyVf7xje0ODfNGRzZhotaC74/UCJh\nKZ2oYG31AhiJHOOOracqmugaeWnFTsJiOK4NAAIXavadstxbiriLcrupl+a8\nvf1qPbGCiQoP8burVFenYe+RRswJC9wZdg7hQ0iZTysDY5MT5Ak7Slk5eKzI\ngvOzE66yAHmiKFDufrUtOTQoFF6iT0mivKmeyDeBMtDXCezWrWQHiKAu8L3m\nmRcmy41FVHChmfBKhL9vvfEcKsQpsAtiroyVFo9F+JH7HIoccw4FKZaOokYq\ny8v3vzNt2Hisu7S+EaQ/Ek+zX4kIsNXKMPd/NIXgNZGUUfsDMcknZ3nve8OU\nupKDzBoLMRbF8iGM+RBQ2ZltA+jIgAFIPmzwhNFsD0qOIN72BRFAvs9FNftT\nNOSweJczRNEGqS2pOubPo7m1rOCQlVVGaf1P2/Gd6HK8I7bAg0Iak1VW4EIs\nqhd3LszmSLwJ6veOeAzaxYrDp49LjLTbwbFAoOxnD4jrRYgactMYVg3rxPvS\nUMFU/3j1Vkq2JgyRow7NmKV+03GbH+0wVBJLpqThOagSR/9MXACQW5sOMPaj\n1ZSz\r\n=KuMR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBicMOmwchHKiPVrmcxom+Lz+7xJJPQOcAW9di0IsoQcAiEA8uDyUsepCsDSogyOW5DcBMco00CmJpN/4FWqqrhcH+Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.9f65ced3.0_1597781772450_0.7983558764345262"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.5962b365.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.66b8ed7e6.0","@material/elevation":"=8.0.0-canary.66b8ed7e6.0","@material/fab":"=8.0.0-canary.66b8ed7e6.0","@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-icon":"0.19.0-canary.5962b365.0","@material/ripple":"=8.0.0-canary.66b8ed7e6.0","@material/rtl":"=8.0.0-canary.66b8ed7e6.0","@material/shape":"=8.0.0-canary.66b8ed7e6.0","@material/theme":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TitP/lXmgi0IR+nma3bIceulD0O9MNtoc2XI2PuggXxLc3/2riVPC7NitUSQYTHy8C3Uv/3PJwgiDEvxCS9Dpg==","shasum":"e3eb321ce0c20a9c30a7b78d7509e630235590e0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.5962b365.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYuICRA9TVsSAnZWagAAOaMP/j/+mKAkn+pRL0EHDojr\nb1nxBIA77XuP19ZIeRl00qnleDBJI7MVV32Wuvd+Nr1LormiOIsxjI0Zntwi\nIrR0OovPsxBfDXJrcWM/ochlXExNjmBNIwbtcbCUSYY4iza0FVv0Zwt98Kpi\nHk3tLfFN9kI4yOji34+dHu1OwNucseyN6y4J4iggv2+Peh0sXSkIwXVrRN0K\nIwrdDwYEBNJxVL19kM5GAxgWGg6F+t7ZUez6aLC0MPy+SmV56cXcraMt/f1Y\njn3OUuKq9N3DCLO6ue08v0crRgl1HPPpgpieYxNXGEfWW7lYr44cBFeYdpdH\n8JFtT1Z6evi5/VGRlAN2+k7MGT9NeMyU9uatWGr3FCVQURxr3nnRpCnAGt1z\noeEzPG+qQiIdAQOlVv/LzOr02lim1BAnFjYpibrNpt5NFt7winLPE247qZ5R\nKV5ybSvsw3cBeOStI+obbiA1b3CN1IU/d1ow0fD0sn4qMyOhLOGz643uQX1d\nS+9V39Xq6kip+HcVWsiTBN1mRZwElW0F9j9IkwcoFea6n7c4jC5fS9SSFoCs\nB6aEiIg7P2KXDRYts8sy9RGHf/2OhLo5NWEKnjHGGUXWKDxzRmfLspxEQuL+\nLQe11BGi+ZiGKPTf0WFnGC4Cm77T4KcV660mvIu3/nk8StaZolEPT4uOXIf3\nfux8\r\n=DK/3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXeTsFKvJSgb/iA0RJjX4iFYXswONBbXZqvDtq+QsEXQIhAJSb21j0pZ331YWTVhXdJ5KBIs37SQ55xZHEN6m+aScv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.5962b365.0_1597868936425_0.6305826710602593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.9c9ec756.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/fab":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-icon":"0.19.0-canary.9c9ec756.0","@material/ripple":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N7MLB4fBZx8SEv3OMaFgBPrm7AwvQaWcNC0Tpuu+iqC9TLQxHQGQfGMjd8nmYtm4oBcBAFLe31fBhmtsDnwlcA==","shasum":"dec0f6f21eb7ad53986eccc61d29ca13ea9273ff","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.9c9ec756.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsc+CRA9TVsSAnZWagAAExIP/2sPUEwFTTn+bPQF5ANl\n+Z6dU6UUX3SFTpQNYx7jMzKTl2rysTni9VIpxIyp1Mt7uluJv0KG8B3UNLd2\nk/mzOi77vqrXdrnV/Au3MCXyEKksmY+D7xBXw+9URICl2s7VuScQdDs5n+uj\n1A9REhR4AM527Ks7dFekdPbW+ZwAt/T9BR0SOKcNufDkcW3gbhAxAftP7FOH\n7hp7i3STN+F920ggyFgfGY/LlrgT3Mz4u62VsMnCr8CUpQdAAZnMO0Zr+vAk\n80a1atYPT7iOybtDIvyyvR2wOaduUu7ET8VEwJYhO0GGFF0XJnitJhCQAMRA\ntEA11OiOeVPQQUkc8tVBrkTl8Ry7Y8Zysyr2sqZpSGguTIn11YaAc+myTc3H\nQflF0q8jj4e3218RzJef0lauhilSILo/fO33pmVriPueO/+7RQQ8MJcO+FDu\nc28UWShJAoV93v9KQEN0qWcX0dPYxDo7S+9+H6nvU+8S9H0PZCDzmDas30+3\nCipl4ceXDyKFN5jYgXrKOq7xN0h/4g629S2lirOXpQeHGyfrVTO9mA4g6a60\nR9ieGxIJDZSyjhnzioGcK2TMvN+6HYiZJ9VZlsGD62WqqLAokrOS5V8BLH7o\nE4J0HqntsRmDhac0tEDgbdozZw1HRo2y8wmZT3CHQMIzu3ivz6RG5DypqoL+\nDGVX\r\n=txSI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBYTvONJg60Rt2aiuozY/7Pd98o0ekbPC89sNgbs39EEAiAqCsBxvMSuUpSLnjLJnD2gDJEwOAFy0TGTNOBqFHT4Gg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.9c9ec756.0_1597949758004_0.9773712714768537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.fa0ad66a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/fab":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-icon":"0.19.0-canary.fa0ad66a.0","@material/ripple":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-McfNsLyiu1oVDrbGguakP5w/JRwZG+/XZ9w3QX5kQ6/NZQjIyIUo0/bzV+nSZ0rmeQglltugwZEOABWWAnrOsA==","shasum":"46c04e5a32efcc23d25e08c0ca71753c52ef9812","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.fa0ad66a.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt55CRA9TVsSAnZWagAA+nwP/j4HQYC2G6ea467TLRoo\nSCSjRvMpms6077kVx5L1RXSFfgW/R1PJVV/BEiU7Hw1HNqlxVE6EFTo0tTEh\nq/888/5WxHKgJ8dB7OpeKT2y4C4A/C86UwxozJvRt1qUKjZYVHra82E1+wY1\nQPrCpuIKEHiiZgPxLLkvhNwBnuL6ItmEpldaFbPXSMVpVk0upZoaVRRl0vck\nRIvuuyQjuSd/i4FozTd8fZt/lTPwW0buxu9/ZqfsgEBhhUKQJmZ20leF5hCT\nLmVz2bCgzg2aNyX6/cZQyJ/lrJG2k85sSxmI0U7/2J5xdBag8CybQ2JfPonG\nHgl5ckyCr7btiDEqIRddq+NId+EdqEhvtTWlBhWedj02b5eqWpNUinL4pYCh\n/lF/K1QBWvwEGMK7YQmQIKDf+B90Eqo2thRdKffkIfbh2DFB59sVv4Ckk+qZ\nORqhJByZLkcpLJWeaLOdyc6g5KAdWj+9U9QiIhhxGZqE/AVdjUHdwa9VFyAS\nHX4nazIM7ZSSxCu4iN/Yr6oOl5gOATSu7zrMSjrjUWajkd4sc0FdCNRTyQ3e\nAwVjJrMgPn0QNToqEeJlRWRef+Ul+oVbyR69LA//QR9BcA7MlrWUNQ6k8tWr\nmjWwZLJVunsw3pCrjzCMmIVCPQsNqF5mKqhF+Lw7ngfEszPwFRKiq2iyaohf\nWOok\r\n=/sbM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEHT5hI9L+1GGWBqUYcOr9K0Q+K6JlCarob/yMYosILSAiAPiGdPufHQQKeG4jWdqwBfScbywfobc0tNtvcdAd1t8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.fa0ad66a.0_1597955705004_0.6184905915790824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.06ecdd6b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/fab":"=8.0.0-canary.da72839f4.0","@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-icon":"0.19.0-canary.06ecdd6b.0","@material/ripple":"=8.0.0-canary.da72839f4.0","@material/rtl":"=8.0.0-canary.da72839f4.0","@material/shape":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bGnc7+fvp15jEwuD9/WUSuPin0QYqZDz7meEcwO7DH17GzpFbBx3tXflQam+5XOwUhrH/uPXbu8c6rJpudHYzQ==","shasum":"1c8e911224bb921237e2dd30bc5fb39e35fa1b7d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.06ecdd6b.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxNCRA9TVsSAnZWagAAJ80P/j792/hnYgM+lAgFIfJP\nuwbbL/OVUFS4m/kJqeGbs/kaekorDJ8XO7ATqbVQtNvkC28QkM7+QOwJzQkJ\nUit6PuAyhEeR2hLphQ/CQ1QjsRMebkHFxLBBqWaftNpS0T7m8q0AA/4CSAxT\nj0EoSefm3SMaWwQnsgTbOfUtb8lBhprX7yDhS4TSj50BX4M6lMWQeEh6gXQg\nIj4zJwUlNLmJSp/oKLbaxsh56E8m9lBGD7wnmb2kYG0fc/i2Q9LCyinZkpS4\n0DwTqE8W2VTQJnPLS8FA1nNDK2mGs8/FRRwUuo3dPmgO1A4dtUQMAFrh0JXu\nrm+Q7LgJ0mnlYTrwbogD/pP7DE8/3P/F6FHTgJaHj+TQqdhrOYi6hgN5c/gx\njKnf9awFYjJdN9DJWRUOVuHMRjd/yhZS1Jxd22T7NFsvqTBXUWKUtJdfPKHe\nICEcpYFnKbMVnJIIl60NxJnLQ/1Ubs4454N5w19RGcmVfp4R0nnnlvuofQqg\nundpxMnOx5wRdlF3ylwB8/HuY1BcQwH5XRY85JdmGOKbt0LH/ZkdrnoxR8tx\nvMdOSKrJziZjicpSqAOuKAbzzMo0FQRQWyZsraQQi34Q0mBSd0xvgVKgQi+z\nGnNx2JIgodpWeznwxw20S1pUJdAf57c/BhOzQqIeZM2+WXRL+mJzGDEFoaQ2\nRC1J\r\n=YVyx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFWvqiVsvDP+tP/J9DshC0DVK3LxERpoLpbHey/0R6JAiEA49qMxSA7sIgI4Nvw7sm052eVV9QJxDz22A1B8OCNkLA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.06ecdd6b.0_1597959244593_0.2999085209540131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.2bca2318.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/fab":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-icon":"0.19.0-canary.2bca2318.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=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":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-adcwTWByEx+JONrboQdYo1Tf8HqUPkJLDLqkjYUhOgG9P+cfuaG8sInaAM6XuuuWuk7SApdux6sh6laHstgfHw==","shasum":"8f622272b451989aedd821a562a93601d2b8e06a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.2bca2318.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAneCRA9TVsSAnZWagAAI3kP+QCBCqIfGvCGc7y17zMX\nnIE+l0SfISxKoyrClGEh009d2cFxVf3QXY+CSPEDgRs9n2/k4yexf/YcRH37\nadTMllev80SE3qWNuAlFl2aW18Iari4vyU7RDZzSybvyxxIHM30sD2ZPzOeS\nFhu2FPtkj28FOb/Y8XMshycQ3aQvlk95tqwgMtldnxi2r+XwQ+n3RCNTnFNF\nlmlu0cawMRuG7/mSEZxxcUdvsJnLqPEEHfeI+SJNIwplIC6/Vjz03psfgHtm\njnC6YOq/NmT7uv1OMHz5QHy4E/W8dlaQV9TG5GB3mvCpQdat5qtqsNVqT7uX\n9ja0V8KU6DYnJIZdU6R2gGCh+ML8fdP/ukzmuOGB+q2GaDLICLDeYh0sLaeQ\n/kEuonoa+nBzxUSPyKCRQA0FQvJlM3ovvGkXJouiG82/TQvb5Djq7AnhcOAL\nV+3sNDaJHwF/egN3NHSiNvmCDm4dpU9XtaZZLGRsiWPPSobWt9EQCVV0DVjj\nx5k2BW24ZaAKPAlrb8nkMMqDkmBeNOo7HxvCGL0dYLoQ1eByTsL1WTeAJmv7\npvRFo/oFahRdOt/hOqXa21hNCi4jNdVvyhQGCS+Jvi5Gi2hduhL9pf+chH0L\nVhXKRc2Kx/DorQq8zRzJq4WGMJwiPA9XtmAaSVIjJhmin5lTsGMmgM0KMybv\nIHUL\r\n=NA/L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd5nOcTuH7wuvt8JUJUt3GpY0WiuLU4ituTuhlKJyt/wIhAJ6V9liog0BJ6PjgjBUPxU6oY4t0dugEvuRjmFs0Xgnu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.2bca2318.0_1598032349930_0.4568528926277946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.6aa47265.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/fab":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-icon":"0.19.0-canary.6aa47265.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-G0baGLWAneO0K2CkL6scHDv2ucHML9yLZuoY99IC+enNz4h/nMJhKssFn56gnXVsFDa7qogmJMiA9UqYjEjfOQ==","shasum":"622a9d390344f5e4b305114e7e60edc70269b909","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.6aa47265.0.tgz","fileCount":19,"unpackedSize":84584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9oCRA9TVsSAnZWagAANJUP/1td767s7wzTusLfr2te\npz6C/IKtgRyN8W/uMUjFX9WP/yDd5Rm3BX0JcwDpqpc+s4fVviYwYy0ImIev\n175UEmESG7FSmOV7dphBUcRpJM4Suq5tYF//6DlTdfkDkLopGe1GdSS9FZwA\nZstIHRqbSCtmNVGgXo1OaZov8zTxCtiy06I79QtTUohOMaHvnUKNGsRaoxPh\n+ow8sIns0nDuD8rvSrW9AioDtDgdcYGOVtaHDn8Jt/5ehr34MnIVLIagXYgt\n2xd9bKAD98bPOEcV64w3fwWE7ETxazqoH46oMrkwddjYuzPTAuwU2mFRDKar\njDvczsSGo78syzd1jfo6BMpDWezqjQwzFbszYIFwtIZDuWRRuNdH35mLcdSi\nX4md7cONPpK4qpVxgqi9NjvRtA9ySnQFttGmRFS7vQFtiCL4S+4LqAap7igj\njUrlpt+06RGdcxRL95XCSpD/1nT44tSYjsYty3iOmMLlK/wss/RC+a1Wp/we\nHBo1T866Xj05r2sdOGT+TPkEReqI4Iw7Kw0c7FZvPckV1v6Ttkkafl8CXj04\nyLAplLHci3BlyGHf/cU1PfqzY+gUEsXa7YGQjYKPXdUPovOP3Ddl/syI9qcQ\nSzOol29LuKQkhyvbcRALIFLtgNGM1/oVhNjP8+noLJZDIFEMAYff3MDIWfUL\nOMKH\r\n=Gfkj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClKq+BAK+J3C10U3V+BBnjD+v+J78PtNAlBVU6D8bXhQIhAJDlps9rotnQFhJkyCoRUT5te/5iLMOGn3OCvaIRu6K9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.6aa47265.0_1598033768129_0.23432410762686162"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.e7202a07.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/fab":"=8.0.0-canary.95e4eeea7.0","@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-icon":"0.19.0-canary.e7202a07.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RzitjxGdu6xGJ06j4/Rrjo3XN+pguaHQECpsrCQWi4oodjB5b7hcHbrb5NzEWRyaoIZWQXToDz//9iJ8270txA==","shasum":"8c2dd37fa9c3b60456c28d6156b480fb6d3d7c5f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.e7202a07.0.tgz","fileCount":19,"unpackedSize":84588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB85CRA9TVsSAnZWagAAfHkP/0nrJyNYTZ1wLinlevOd\nNt34w3z0O/RUblFiz2BC1k+ZP3Ayb9E4lKC/RlIP6dVLVCyMByj3EnOIF4/u\n6RPbHxEjM5VFkMLb7ETzHTbeRgT2IWK6e9asehcA5ypLcMLozpkcBq8A6qOD\nMF2Ri2fNiWCYIjJP8zpYLwRwXQ3gC6W5vYQesJ2GuN2PMF18+1Zisk3PIPeN\nfCPqI7/mko0uQOVxDiqTq/zrHAiX+eM16NIHTgGA5gK5iuA63vi+TZFsQ1Gz\nVnSrDG/bbntyFs4eyxxyJnjdk1WP6/nNoU0HEufJh+4g+phaTwdz6rmVej9G\nVF8CiI4Qe0GZMmyBuNFQITSeQEQpY6906OnH5tUh9t7gn/mrbZdCROEX0xf6\nkZWgat+Fdu8IJYaxb+Xtty+xvyvlraACG3HC80odDQElpHpHNU8KtGqMGxnt\nJLx17NF05idCiGUlA5aRMgbbsVwrYA4Y4lhU0vOOqDiRbqiP3V1sOxbr9RLv\nn/s26OJfsbpmxCZBJLT9Zhoro4AsuKEFlmU3EFzfy/7M8/SmLspamOZv+vKX\na9PktZ0F/7UyqN0w/aeWSfp8eeu8j8L4tbPcpzUwWOxv4egsTeWpbqKwcmuL\nnOhzfteAXLIf9iwyAFteqPCqwsVJWuxjAj0H9pANVxqyb4IpNiCzUi8ImNzS\n97cK\r\n=fa4D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHS8q/P6NQfjvVY78DlSKdJK12qe0djcXydgIaYC4WvKAiEAm0R4VCJ22WdSGXTIh66HopE1ciNRwzVvmSek0lTKnEI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.e7202a07.0_1598037817364_0.04814753418489026"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.f208201e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/fab":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-icon":"0.19.0-canary.f208201e.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nRELJj+nF5jEg6YVJ+xRmtTNXCvcAAh67yF9WmcmXdr39jy9wDVVrfaaYY0Dzdz1yOEX1cP2vWpOjrfiXgho1w==","shasum":"5e1d4db3e2f2d5ececf3880ee9dd046a9c7350af","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.f208201e.0.tgz","fileCount":19,"unpackedSize":84588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA72CRA9TVsSAnZWagAAnboP/0uER9RnczWNJRuiRhsz\nd5URdIX1iydFHXHg4jHFfsfc03yJTRnxKm3H+pkfB9osyWYpyVknn+4J0SX3\nPyQ+w5OTDC4+dl2GRe3/3PS+0fn40Km1p5APukHpjWR8tY4+SQNWb1AwD/lh\nhsBtQvA5lGpPpkXyE/HUa9550Wqcj4XhPd3YZtoUj4fXo+fOXy/+7IugQVSr\n061qt3Q8IJ4FFtu5UGtJpOeITgvNIWo6h64rXm5fUkihWgXcR3boG4epqa7/\ns56u4ry9mgzvHE2CWnlteJK39nqOh/3BzLa6seoQoyNpANln5zuLyhw671rJ\nr8JgbxTIcb30hPt+CcYImaBkFDQRCDN/BGanP77RG6DYjNn5u9aUncpU9nGY\nx8oIxY7bSY/LqHRtRT6kILc8MAOeXDzHXLs1AfZDPBysozIHMHM6vZy4H7cf\nzUHT/Gh0eoDRDJlDrYjBwfgynp9Sb7XnzDZblTb9zPValLmXOuGingq0Avgj\nrsOip3FsdMXnxR1aIMiQSurrQ1ig8gv8ohmIywWdfJwxlU4iAk/dLcynu16R\n0QS9LH628jZbBZ2au0b25E8tX9HK4n+Cd7zSFJWjodWV18urB1FsStpwiQhV\nZ4bsBmUfCZ/BubmsU8vD/Bn3OKetUNPAX4TdHmHIhORNeVcEkYf2fER62CVq\nXQUI\r\n=PQTN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIByucU5zic14qyrrtz0oUpyAuVVwtX6DVRHB7JNxjrKrAiA7RuHL7K11hiplBAAy9Wyyhitvpg5EqFWu8Iwtm8QPHg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.f208201e.0_1598295798176_0.9642959777804911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.14a172db.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/fab":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-icon":"0.19.0-canary.14a172db.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xXNH5PJ3B3jp4/g1ULdapLSNAeecdPHGvEEKFPb0G2ZqV9rIQ5WJ9UkGTUgq4e+La0NkZi8fAb5WO8Ri43hMRg==","shasum":"9283fd2f0a2c72ea1c26e3a1c0e63c8299932d71","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.14a172db.0.tgz","fileCount":19,"unpackedSize":84801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWrpCRA9TVsSAnZWagAAvd8QAJRevEsrh4gNp770GsM8\nQQHknulc5TOPnxdsZUZsgDaB76H4WzyOFya/ryNJE2hrOFnFW3ZWDRQCckj1\nZF6aGiWTuMC+qUFGdc5FXO7lNhyD6R1a5l/3WYJGBJCjdLWQ3KZt5egY44f9\no2JwUIzSd2Sc0Z6M/aNh1zbt+IVDicFIffHRwdhUU5bOuQmGBkipiGsUhkFF\niMRi4+mZUsEmE8r/ilIPI/23+MKhiYXsA8aJYAtBSLUxUv3sFwGu55RA2nRD\n7QeCdRAHW7gU/rygYWuv+p76hou163sjGYSJHJbz3EugbOSwtJyK4IewxRUN\nwhfA7P5ojm9qGxCzbpQg39w3YQnsu/8s219G0FxReI+VJ3CYqnHqawy8AJI3\nwvy2ZfUN16jj03Vv+iVzJQ7JwI7pKHsiu3Dw6R6YkdwSltKiVoHwjRJbKg9x\n6RTYFO+11bI/1Qj8nbyvy0EzhiWXo9xiHNPlHyJGY1G4fqO2KqkM5y+cf95O\nYKtl4L7enrafU4DnBU2fiPnIPG0o0vEMUJNzEtrIkm5Alzu6lN3uvsDp/j7J\n4D1VyxzPYUpXDZFs1HXNbWLganpryUbTyUs6XhzrVfzDfuD3klvyghH/irZx\nEpuWy8dAwNRKegeMqSgAsVk1b5Ky//ECk0dazXxd3m9951C/ch+fWGsQrpPj\nrOHR\r\n=yLni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFGOru1/oPJTecuRgUrEYdDULDfDloj1mUROVOuzNvI/AiAWyWRdxz9iNtRmdeVYzYPJmHiZvRMyEOGT/plQNNWlGw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.14a172db.0_1598384872803_0.8821704923232438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.e6c1038d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a1c65593d.0","@material/elevation":"=8.0.0-canary.a1c65593d.0","@material/fab":"=8.0.0-canary.a1c65593d.0","@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-icon":"0.19.0-canary.e6c1038d.0","@material/ripple":"=8.0.0-canary.a1c65593d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GL4TJMWSsznClIyCcqkIS/xDXaQErqd33c3WRitYzlFaiJeBuCn58TQRsa6ZsSmVkyrFwa9cigNn8VsNBudANg==","shasum":"e52baa37ab804423a1959ebcdec76d19d48fb3a0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.e6c1038d.0.tgz","fileCount":19,"unpackedSize":84801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtpCRA9TVsSAnZWagAAFX4P/0UyPUlQaYSCcRmKNemx\nx6knLkDeBqACd+JIipMhRgY7X3kNVoIh05tciOlidPVseUXaNbqJ1bi2z+sB\nfN1IHSfYE58MnnWwCHjJBYByhY8gu77PKeWPiKbgvznLnrJmC0Cthozthp/v\nw+BQrlprXoACJx9b3tBnlIJ3qhrbipfzk4dlBJTN7yhkP8ndNbP9NzSf2mE1\nwczbGrpCEs987xXgQWboU4L+sBjSKREhDDJ21q4SpqgwoIOWK+ceBHYq/3+b\nsbj93zSoPzowq5Ax3YTfz2K1eQpyIMRfmFJcZd1xjyurFXZPLJPJ83bbGCQi\nUOpGt2n+VABvKwgZnMyHlJ51cmDIFOh2tkqjLfFI51xsVY7tLOTVhttyMm4J\naenIh7wZt70k6ho4ysGDoxoJCVtsvq4h/AUR5KDrq/Udc6YK0xgKTVkfu5bB\nFLIjvGvgq/URfCMlYXYGkmJyQnp3mz2XuodS68xYcn5617dipUkj6nMaADKA\nnW4Cz+MxBi22naAShcamZA5RtNKDIIcXdfT29zZZICh30v59t9EtK/qNu84N\nKORvE/Rn/tw0CRG125AePZnW6x/S3JxDdKadF+o7Z+ti3+xXaUnU6ZAW74++\n/So04Fd07lrOcCoOhOdrhdv3kJuMMipGZg4ET1R7abdpr8LwFotS4JQq/PZc\nopV2\r\n=1yAb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDtnwER/TRNgcAbJLiwQrWreMg3mjQHWEolwYkU7Jl6AiEArDJnJU8HPxIYx2QGNCOnVitrb7TXNKQ9/5epOS6PknA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.e6c1038d.0_1598557032754_0.5871894284889532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.34012082.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/fab":"=8.0.0-canary.238216fc4.0","@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-icon":"0.19.0-canary.34012082.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-k2jSesxFL9aMdO6vuZelOXZsTS8ilJR0qh5IsWJs+mOrLp4MYLhK0sXdXr6KDlHWkN71AePoYyrxakMQEqxneg==","shasum":"62540b117aa6cdb036132b836534055a6bf08baa","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.34012082.0.tgz","fileCount":19,"unpackedSize":84801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4LCRA9TVsSAnZWagAA12sP/AwgUA79LL1Z/lLeQ01g\nBFu9gmALKOsQ5zDF5zHcsi+CXrSZvSTdvFbVi4rlcg0z0Q0sx7xT6ABaj19+\nBj0rrI8rKEFciytFe7Makg/0lOVQjOUBC4eiyy9tBzTkMjONI8kXHPkUMGhC\nQH2qxY8gSpTBH1lIQ2J3m4xqumlVOhYmY2u+ACP+ifiHaF8uWKfmmmC3WcpR\naBDKsjpzSBo8ky0pRhpZkNPnII8GOs4BXsCxv0bDyDyGsuPQjM2dr/X8VCpg\nye0e0BrN9q1kBfGLo7KbKVQDdYGbKmLHKoKmPq7eVTwO2/FIo1eugn8x2yt3\n9eNSTDVV0iHrpoZ+FSXWaGXhT+/uSuY3eRiwCLBZRcJQejF2On0dtTUbhDwc\nJ66JzTUBYMVpPcKvtYZCjPZXAeY86c/Ftva0eTryjWcVXPuMMO0H0hnIX378\n0qDfeC7Ulcxs3OwhXzsFj+Dp2uDf3EBRWCmK7Ich/vd341xkrTYhlSmRyTsY\nG/cQAoyAmaoLSCXwHfQX2NAwFlWcywcsg0bLzoVSKsp8NW1kQUWhgbxVwq53\nrlqZmmUUmyQInYTuZESRhVRBHn8jh+V2eboZh9ZRGxqZltUBRx9KExYHibJo\n8IK+sP7rsAKBEKTYajmDk/uRMkknlGOZaDPGJ3oi+MoV3+hL94xt2pRo0K01\nQkkg\r\n=Q4jM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHg7WlXgYic9YaKymktsQFVjC4bGdHjDWuuffkgGr7O2AiA/dmtNqgHp6MVueDBDf6klnsp52MmvYieyVIrkAX04Jg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.34012082.0_1598557707453_0.6855859815458061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.c073f7b8.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-icon":"0.19.0-canary.c073f7b8.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uB5RS3fefPjqO9m59tIWsmNruVlhQP1tTvc3I3luHFTNdvoVHpwkZCS8G5EkCy8MnEUvYKHyP2LcC4XPZjX97g==","shasum":"63c5d75937c583531feb91463a1d4c547e06f115","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.c073f7b8.0.tgz","fileCount":19,"unpackedSize":84801,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTryCRA9TVsSAnZWagAAVicP/jR2haJ0Op6BJhGeaXws\nU+2td33FxFtmSzNfy9e2bJL9SngFaayIDJMLwbDcSCrhbkOmW/MPDca6Ziik\nwy7jC134oDARw5NXiAoknsBx+MOBSfTma8DtA3G1R50wSgLcDvDSZwxa9F2T\nCoswLg020sDkR7lYrBaa3KImZkE0LiuEmSI0FcLZJpRQkHQ6IkMYenchyvnS\nKXQ9nl+j7w8n/MPRqebj4k8NLsQtp4B9EHe3d1Z1mt2UvqRiXSZcAPmr8yTi\noqBzP3V8bV7bo6SDCXI59pHeiK829+8/tFCDv9ZM8GH6uCPU9zLKzFcn1O8n\nsH3XZBB+ZnVEm0g3veh3i8gnKWNh9hTAo1CaBUGyOhZ8Ev1n/FQSm3OxUoG9\nyWp+LwhX9XmJWOVpo0T+crPjRjE3htOBphU2w07v0rD4PdSsyjqzvkrTfi1F\nNsnU9KLF7uQY/zpsUqrGB5KtwInbRI/YAaRIsxoP54/VRp0Ff2Jspa3r/0PP\nqXxTTQyDC11Rvywq+J7WENIDIDDV7KI5OuV0W9UrVJHPlbHqnA/Zvm1ZE+uI\n8xj6BN9m63ARSVXdK9BmIIzZpCHrLBiu7aU0vCs6fDUJCfiSvyHt0oYsJzVl\nja9hdlwF/1NGUPPwtGypCd9UgvMraTm4o8NyI4IXmP6Z82esjlkvXoHzvVHE\nL6Rp\r\n=HjVj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRlMxY8A36rfz29ooMHKGf8to4DOihPpXAzQECbY5kPwIgaFdMd57P6BnRLCy4wNSFSXgRS/YsEfZBv8cTGN7Al7s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.c073f7b8.0_1598634737989_0.4767059832134155"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.b7ae68ff.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-icon":"0.19.0-canary.b7ae68ff.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3Hi2X9Yerq62NfBsUEKu0bbfDqkISAtu4OFPKMo2TnYTx92D3r9bKuB4E83+cdtYusXwW5a0dtGq5xOoeSj1ug==","shasum":"427727cee485c28ff35b23217a9f04a6ce57b9f9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.b7ae68ff.0.tgz","fileCount":16,"unpackedSize":68827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7vCRA9TVsSAnZWagAASr4P/jGGvP4Av8o9ea4lSKT8\n0DoYgmFXN4ZToZtJKbvmJpRl0+dUa0aPS12zxUpXpKXtO4iS/zdiYXseJYq7\nq8eOB8IsLzfYfDJFbdfoPmQwpmn7L1lUpAeqNiC0Zg9g7DQHy1LP+HH8DWbh\nNQD5cMjkjaI2ggoBy/cA3Xpu+3d1g9f+dES0bRbcfqy5qxkkPSjCjeabVy/N\nYED2JadFxJP6Lw63jTxmgQVToGxcOIDDKSI1jH3NXmaIw9uGOS2O3aCv9N0M\nODv/zV2d8RIWNPhJqJPm/iGAlRj+cEWHSCvsOpDzPO3pRAYc3pINuiI2OAuA\n0o3kUDMCY0Dd7DBe8edzbSPC4qmIkfiTNxsm/S9nX5AmiL9bbXebXMnS8p4w\n+3xYV96BsNf01FU3Iilsn+UAVfjQvGIHiRvuek0GU58CukKPagzJqr/F5V0n\nSM2mpa3k582WW/UOoFEtW7jP6WA0EeaXJ6ZyGYLte8EG7WPKZfppMfSgduv3\npyg/Ey7QrYXoke7GUMrACGnVJ6IfAy1WrDyMaMhI6mWlTB5D5DqFk0ayF9PW\nuicLmzfvPtLgXEh4h1OKm4Gh8+F9/Iy08bF9NyygbLXhAoWysfN+fwO+g8sj\nQJs8/pLJVY7wVhiJrjUbPIzG/QeVPRAOw4Z0xV8DYf9Pi8VuJ/L4sIU7BOT9\nOOjb\r\n=O8fe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNdh9NwbOOQjGh7z5qcdwIUVLHPsGjdtTB6yuakSaKQAiAT7X3X37jOp0IymFSDp9npkc3iAzacolZss/dchRvSMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.b7ae68ff.0_1598664431145_0.4405525253186571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.697e3879.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-icon":"0.19.0-canary.697e3879.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tpjNSWqzY0Rq0KV0NVDpb5PZtELRMGhNocweGph4i0qCT518hYAlP+t3NWc0Gg0LolUvbTVizXW8AYVZoSylDg==","shasum":"d93d579ec0709ecac7fc849105ab2a1470149dec","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.697e3879.0.tgz","fileCount":16,"unpackedSize":69557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOdCRA9TVsSAnZWagAAxwAP/3rzs6d1Y8HP4l8FJEOU\nttT+kdIDeQCSj7WarKTRXNcQpvKCXYSb1y+oGBovx4W5sZR63ZjavVlmdKYo\n0WuTtP9mqHiCyo4JR/KZNTVu6GYrPmxGC2ym+//iiIKX81twFCh6OGKteeiY\nzvzTVJW734icqaqqGQ1mxrSDM8eq1SEdkP5PbFqxM3mKnb7Y06ySYZN4ropC\nJ5HjFhbZUxGNnulYuC6A/fwXrT+IlN3RtTfmSK74FW10XzuuSBuknqqm/ppB\nUkUqcFz48KRQO5B3IO9+/RMLIFx9J/B1Np9ntzqZo8d8QvQmcBznOj8gckDt\n+42tDx5UosyOCQ3G9bE6Wxzau6ao6ry+e10xtxYNHdARYIuENhbs8pcC8h8p\nFNbOLQrCffM31ujk40R+pyaiDDak4BXYx9DnRCZKuF8aJl8TcTSOgSzfFR+G\nroIX/+upx4pLqkH4TbKfYeoGX4uw6e6L1/n+wnPbkBj1yepUAvZPAlcKMwsX\nDOqP4JJY9LhrReapeX3N9iKfsBd19zc49WRyffvLmq57XmkZ2eE8Z23dseIq\nUjIGWabueriJ1eZjjNHDj5M/YZBdfTt6ix//SFf0Jirmxhisq1OxZu5UNJX/\nZ1+P8UuWZPidpeqOo389W9/bT9wUGqxyUcwUj2RXEw9DuKgakVIFbUR1upK2\nJJvd\r\n=ezZU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIh4oS2nyFHw+pfFJv9abzztJ9yQwHgI3x5k7ZGFbPXAIgWqYf5nv8qizV7tjNotGKPvVowsXZ+KkqWVHgnUzhKLQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.697e3879.0_1599005597333_0.6883541431831759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.eafb7991.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-icon":"0.19.0-canary.eafb7991.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | 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-on-secondary` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/color_ffffff.png) `#ffffff`                          | Foreground color of the label and icon.\n`--mdc-theme-secondary`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/fab/images/color_018786.png) `#018786`                          | Background color of the FAB.\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12                                              | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qR/riOJi6V53aaTTKOd43zQhhSoNSAwAPpunm6LwlE4wBNHLxeqophm0chCxWsxQHVG/HyUY37MLGiKsH6tgSg==","shasum":"f1b4aef179af7876dc2cf9ed0ad83d68d52a1002","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.eafb7991.0.tgz","fileCount":16,"unpackedSize":68827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDyCRA9TVsSAnZWagAAEHoP/1LQxJB86iWVLMbIT2xp\nq2U9R5TcDdEtC65P7QuFfYR9+PJyVO5Zf/bmNPjCiY9X51vR5FcEieniCX9P\nNV1rpte9xgj7zhBa7GQBJOVErNkfv+JNrvSOj8p2c6k320wbym8jGbGu+Ulz\neWg8F1eWOXZQz/2Gm4eRYJKv77VN9wt/lzbyX94BsCFvbGu2YfPxxAKnMrxb\nF82MPn1wbsXpDgEcqAgrQU6tOT3pA4qdO1Ujavj2EbXfbMsR0xApHewidZIF\nGaRrJwHCoXnJUJZv7gI6VkgY2+WAi51IFxyfDEfmDShFNEHRR85eWEO0NOmQ\nESO/hhsQ0DalDJ3HUCgbaDdzYM5sLZdFr0k2pmwJ/vQS5oHo58ffVENNBFh8\ncBUVDqGfjJdxFTGn5j4KgpfQHla+nYRbDGukW401I8g/9s62Z3cLEv68W+fk\nc1/1u3BNwoaTA+cdA9s2U4vWHJA7d5+ejhlyBcUc6FxYqt/FfOic87K0uRLZ\niZ5OHSNGkvESvK6cruzMailzzpPsOwpvyKwhFgA28WETRnRQ2F21aIxoLw9y\nHaTqXo9z1KbIf0l5M+h6MZbl5ute/hzF2SCr+MQC/s8pdecW1PwvavlsvwmO\n9wwxzuNe+wVIs3cPUxQHKjod4Fzd3N/v24ssmuuqHKL7rc5MWsC8ccpNla21\nrNH7\r\n=xL24\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDDhcNA662DrgmcBWZBI1aPP59kJjyeqEFQMVzCnsVEQIhAJTRmHBoypBzxaxkzlpFWos5bzEt7zC7/4ZqQbuKb/QL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.eafb7991.0_1599013105537_0.8327971070514095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.606642ec.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-icon":"0.19.0-canary.606642ec.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FwYCWpLP3yom4GC+1MnL3otnfxIwOwXFX3l5ifzCkXt9zYX1wu9WQTNgjG0QJ7H/VxWk2rDYm9L/BPxMBEo1ZQ==","shasum":"592f6270509b9a79807d7ec84b9f39ac13a825ab","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.606642ec.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBAtCRA9TVsSAnZWagAAUhEP/29VzCnZuQ7wmeY/hHv6\n4oHihQHsMoATzO+AJlArpeO2jSivA0QxYu4pphe0hyru6RkYWdhR9GCtcl2D\n1VBf8n2fEsyl9C5aW3AAx/Po8+Fhc8TRXXFa16Bs+a4DHjsgI0e2FPOxz72w\n3B4Sv4mbu+pzjrZ9nAIsr9COM8XX0CQy3hfe3kxMlGXcCuo4RkUcrBP5/fVM\niWAlIsfyCB0c4Z2sWqwSm+GohhXTYl8/KxvYjn6rh2aQiwx5RL+qc4BC5Urw\n/+R8+2kgGAEIOiicBApMgDtH/Uyau970xH8vZr7o460TpcAjYjprUzFPFh5e\nyLLILfHQqcSNsgpF7z3XyE5pCYqUvkm6fEqDQAkudyneNo/NU6mfTtEy0Dwh\nVYG81acqgrAYV13z3LVBHtd9b4tIIng3CgY9v2RWGZX2Ms0heweKYla0tMwB\n7r/zweKkmXhIJUBbtrLu39CrhksJcbAKhUcYKL20rtssO41WI30t/OCrKKrP\nDHDx6v2mZOfAFN8u13zr6UbaRtn+2PiUt59zIJCD3YHfsZFBt1NkhZRytF0K\ncKUZewfp05y3wN595jawUU/xXPjpEtT+qQ6kMZaPH3yRvZ+0UjENlJy/e5Vf\njRZabKS0CDHdzj4X0l98wbNcqamtHAfPVo8WR0XxP6cjK4vKMxpKYsTmbGnM\n7pYn\r\n=aI73\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDh44UkH3zPhB+vsf5vzBgpga6VU65DKAS0pZw2GXL3/AiEA+qmNBThBt2Midhx9Oik7eotG0zCAHINz3O9mxZ0WOBk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.606642ec.0_1599082540764_0.5833125623069377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.ddf05c42.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-icon":"0.19.0-canary.ddf05c42.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jAbVC2988QW9+rgDo/OZgxLOaO3b0yWe6epo2BQTByKxm/UaInUWXZs4ny1isn/m1P1bVuJwGUNXcM5eFIs1Rw==","shasum":"a3ccbb561862e4d92d9dd87907118e1036cea424","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.ddf05c42.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVHCRA9TVsSAnZWagAAscAP/0K7IdBNBqLMG1/QCLeC\n3mwDJoUkouhHpnPmm2255Es/HVscHPoDX4qQXkshXOOpqZfMO9PqJqL4wpBk\nF9wGpNFNsPyuVTe+OAYXoNjyTHEpy7boYyvChx5bntJDgpGIikYls8IUJNsZ\nhfMxWNk5WX0ALWqnakkp6Gx4+bEdpvKrQbwzavaKxEyDmTwiHkFOb/va1h8O\nprHmnqSG9Ad6nKLoVHCARO571k4s9V41ajOWcUPqEuQW36pEBqDa+Y5pJqbA\n5GbkavGGO6ZoH3KapQMkQU4em9kirLLv2b3EBykKOFUApZui6+zc4Tzsomwe\n37K3/TzvTCBytg31BM/TLxHZ5uRGdB0zybD7VDhwOxKkLsyNL/aHF8iXF8A6\n4o8FeFsfJMBpWan0w66MYgeje8GQO3IDyifHEsayOnH7Jst+gDXhf+J6fdKJ\nqfvExNYo23XyAJpLbJSIxGInyo9bqhkhie8ZXizSO89yqylopUMO/XS/lYaA\nTL+zSx0IXtmMtGq+j77Ov3zsqNVR39a92oUxiJCO8FJuEdtIqzYo0WxEkWdy\nufm0jE1L/d8xKrK+tVUiG/AP+dSmG/ECV/pbN8XILxxSD9eYF2Uzuo+qRfIL\nMTLRnsSmbG31fVnibRgxhTBI9enxaw4r4WpxDCj9wYIqy+DN/NqzPE9t00XE\nc9/k\r\n=zgkv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRHH76Fc6REairmCJSMsrTdvG7qGawN5mszrAIwkrFpwIhAJTAU5FuGOw0n7AFiarGzxQdltFeHQrQTkaXewVj4B4Q"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.ddf05c42.0_1599141191497_0.8082297242250154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.b889e6dc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-icon":"0.19.0-canary.b889e6dc.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-M0QopGmOJ2yD/MkfI3Pv7lCj14gVqWd9TwU6iYFLW3F1nuWPsL2nzMeNplnMuz83wj2srYK3MDNiPuuJ+5NJ7Q==","shasum":"b9f8b794c73eac4281c82a46da6540e771e7262e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.b889e6dc.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmJCRA9TVsSAnZWagAAoKYQAJG8TXMh+LGTI4Ah9u7i\noOBmrDXeID/sfth6WVAsNAok/b9kl9U5iTmUsaD/aujKpkjKEPuKuT147OYp\nX79hyUa0BWxWC6PKi/+rJ8mYHf8+1nEKS7Ca/htrZItLwyQ6AOzYFKTiUnGR\nB3KUAyKXGDroIjnOLj8JClV/uE8xoOQbHC+EoxP33XWzp7z4KgCJFG22i/OP\nF73sZ4+J4bfcTOVrztFbVA4WXTrmTXTxkOmMJOKVHq6tjmEvrR78D0ApiPk0\n8V9wKiYHJSjzRC30eMP2A47AU+ayrSZ5/TAOdk70hjkzyiXvnI6ihSaTMq89\nTuweAUPVFP/QGTATqAuzSvQ3d9QS1pZvYWnwV3iLgGGeudQxwA0bVpx0YoWa\nRjNrkN4xnYhHIr2UfsHrOjGdZwz1avvyfIVkqqRDxam/NOcbbKP6+097nLMq\nKdEtW6cPPixHnZbv8L2WTBMFTB9yaTurf+FFnxpo9FXCH4X6FD/D+fKCAvRG\nhHrey2J+8u8TnRF/+dYHTCFhzYOOxOEW8hKlV/p4QoyqgXJU5PZ/YH9J2XjX\nDzqXA02KWJozxH0zs/Ov2TLzDIyKtujBlrcqXC/HS+o7CUs6N707WNxoH7//\nxZe3urgAuvwishYkkBSB0nVyAHPlcP5p/8bZR5uZ2+iyLpbnkZUXdvdjbhIg\nWW3L\r\n=Y7VS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDWqFJhR0JlZPTgpFOypHmQ6SkxnDVWyJDlBDyAFvetBwIfUjYdrlnr5kA/aA3XTdjLqM91X+BwboEU0WZYUR9eZQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.b889e6dc.0_1599142281011_0.09106895879834465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.aabeceb0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-icon":"0.19.0-canary.aabeceb0.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ym6itq0rdMQKLAsDszGqfL32G9/5hhPpx72OQweD8nAEO6Uvup2f2n/HfP7I/lhb+jM/HNFC8h5Z+336ijg3CQ==","shasum":"44140c9ef8a53989b0fab388ad01209d021836dd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.aabeceb0.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUq1CRA9TVsSAnZWagAA5PgQAKK56Z13IHeEIEeHe6BZ\nDDzidN3Hy6gX5PXbtwBVWfgxyu6UAzHVvESFFzeeJSUR3HaPY0WpxNK37ju9\n2bj029AIt9FzIaNVUMu1gA2B8rMOj7G2gGTvU6L8gIOljBlr0xm3+PQJ2vTM\nLb5V9rbiF3vyTneG5M35G8qzk7cfCa3Go/y51MEddB5Jhqo0rXwl+4lQFu3p\nxh3bjQLzKoRX7FRw7ijK0FqfiTDxQHfiq95WfXEeU7aRnODUmlIzkVDLruUZ\nmfL2hhz8RH03HdvkJr+hwyLAW1M1v2mpM23r4EcpKU7o4cQUOk6PDoPMnLdk\nHLAp6Fcw45FawQuADvjJ/zNqRcen1gCbBCr58n76bm2ZXE9VBhNg/KbiZE8f\ne5BWBNm1fuJPC5UXF5xwzOc55nRCaDcMWiiaFQh9JZzE23nXU/NwYuJ4Joor\nVkLYhRB7zJQ0rkn1IRtcYk0eeyp0JSwbKCQn/cz8Vuoi2poJ37uZ0epf9ch8\nM/lwbVUUbh17m6tteqhSy52wd8ebsB9XaxCevHcoNk+6/wFHtWQofJFTar//\nSQ4IeoDfX/Dy7iq2cOjgoifHsKX+eWErCslu/1OuT1U3UlBSr6RZM+0H8uF/\nL710vEZrppXMprV9MbXVfFcS0K0HWqAnF/0RMeuNzCy3Mpe+bOIuu8EAK4SY\naUV8\r\n=/wju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Nhg87S5tFcqlwo838p8JaA3yIrxuUmXyn+H0HsTKtAIhAOhhw+nm+92DZlyMMTVmEQ2N+jbvRBTkRt2gMMbkoSFT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.aabeceb0.0_1599163060690_0.18720348266587705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.d8cca3a6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/fab":"=8.0.0-canary.911014711.0","@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-icon":"0.19.0-canary.d8cca3a6.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iQ2y9P5YuIzVUezSR0Zm7ZFP8dNGuVGr44Cdz0UBDldKfNSxLGvfuG4Jzj2KRxVjrWEuXysS82JAexRf64jQYA==","shasum":"4c2a882860a12ca50ac09408b8303254e3d6354b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.d8cca3a6.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWC+CRA9TVsSAnZWagAA0gcQAJ9AEslfzqy333pr74Xl\njt4cmAsLZYbvtt6gRlsO95YL/zMXjp5ib1awV2lFf0pZOogkKAGPZw2KcmAm\n2n8R3gwhN1g1zfh/5NMMzKZfyUeQvVB7fQqbQowW3nmRUwqHs7EaBxuI8Mpb\nmxe8N68JnSABRqxohCsJl6w97hZBjl9YhqbwUoxStEsPPMH2rsEPXO6bWfsi\nQYsE0TZaAhX6U3E5Neikquq/huRKEQ6Qj4uGRF/CAZ2cyADMSAJLYwwMuD5a\niVWydfuskLNG2+O+ZsP1eL5bAUvVeVdUK87BooL2UeGwWUhyy3OW1Oyjk2WF\nymecCo1fbyj7uiHa+tUUd/+42EQOOBD93V0iCe2tITj90FeEU/uUFgoZiNc9\nSlE6qdJ5zf43nsX6Fkx1Tc5801d65yhI7Rq1ptQW2oz65COuesD2PZ2ca1fQ\nCns0EjPjsh0Fqg1CdErwpSToraXEBu+h4/ZAGFqMiICbS8vyCvwJcPmZDAht\nirvHO3/oI3RyR2nUGZWTMxuDNXbu2OVkikDtOeiaCTkvkIGUjTn6nevP4M/7\nABrVq/YMO+7fGBLHDeiTLOm+E+b4x+fI2G4kMhrhBTNf+DT4h8EKUvH4DUKg\nBX2hOhIMXqpbD4i2q24joaAAjwjy6aNNfDAQIl4vu77j3yhSIVYjUFqnYYks\nA5T3\r\n=ARmY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfdTyEA6p5zEXHqT7PsjLKfnFeJF1FLBEMO00bXPn7TwIhAOu5OYxcy+IoGQumRdCX8U+h/l7ahOuT/TxU+LXBJZSM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.d8cca3a6.0_1599168701839_0.869140454791562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.26d34b2e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-icon":"0.19.0-canary.26d34b2e.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-P2yllgBQuFQ1LLuNBKe0SycJoQgZTwsTTznsEgrWasXXfaUG7WLA61k+jy+ozsEzFnBasb7C902+FbMhsycFkw==","shasum":"edbd56e2fbcc2540ebff69a24ac5820f59d5ba7f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.26d34b2e.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWaqCRA9TVsSAnZWagAAAkoQAKBlAwo7DxaIA5U5vGCZ\nXaroMoVizBjHpOGssFw/xk4NFH0+/MiloP1w7a79zp007m4Bz4wX4BIoXUj1\naGywIShMzBbEhOMmoHj/wq+HdDdb/ynkQgqoVWZ8GJtGFq/FN+4yUtj8co26\neNRK/eRZ8BHjapw+BRo3ZotpxMjw5/LayYotLeGBQpC4Uv0VRYgBFXmbzgYG\nuFKuEVTEDJM+A9CkrBENTXknGdykos2StiwWswWGIFEWWcmt6yYTPk3STela\nwH7ueciwBYi5ItFIR5Sz/jpzCuwArfsbzE7zAtnz8uD9Y59SKxbbnx2D4qZH\n8W5Ig7hmP60ashNLopgcHDsP01GNJtwYA0BokDlEIG56/JWcSd7eGV94reW2\n5uvVHSOYMs7g3JOyYpLu2ifPZ3LBOQO0lSgaWZo4bYREaKilByhncErdDnTn\nGFan427u1sT0Xckr8oWA3AHjRDkB3/RWMjZdD1VYukzA9CWxeydYyr8vSEB4\nLwmY7+QOw1GiwleTw8a9l/2uxfNrpx28IAaGNReh2PjcU3mNP2wpiDhYNfiQ\nFKwNphPIslrXTSk7hjE5RN2VanMvJdjsg5t8p+GR5gIeKjspDg9pP5B7NCAY\ntBokaHj5IPwpwJ/qkytvGRW4aCBL1VYXGRaEHyS388+J+yd/wRFiQ9KClsTb\nRNsp\r\n=8y74\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkb8sqEifa8o9+B/8wG5UuMv6hpIks6tolKAgvJmAPbAiEAjKPoa4KV8+6RcE7L5m4UUD/C57or4DEXMxVYHyxBS1w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.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-fab_0.19.0-canary.26d34b2e.0_1599170218101_0.7031885280142798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.a1c44494.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-icon":"0.19.0-canary.a1c44494.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-RD3L9s6vsGzwS3iEJ7eXX42jagnpd0njt2eXmEih7yVlh1CMsdH03IO1Rpc5GHapXeL2aqLYfSpeMnlyKpUiVQ==","shasum":"9aef8352e373a4f76b3ff30a6d8abe0bc377127b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.a1c44494.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVIuCRA9TVsSAnZWagAA16MQAILg3LraVSgutgePUQyR\n0wKNaw/xlBw1OOCEzluYccW4298akP/XJKJo3xpvgV+5o2GWxMB4tHeKoNH+\nU6LSWp611PL7zAnAxu9tf9RQoWaYU4uC2RUsh3wHcyr1Qul/E4U1EXjkp7Uw\ny6LuKdNcHVQ20eETwH+ZPgpmrUKKQH9OP+gDEaQxmD7mKwn4bDoP3RaMTWnH\ngv+VUVgo2oLo+D1jx29Hh3pnYlnBjy8YdZxgdVcHVYHicjNFqVnp4htj/THQ\ndRS6duAF/VKhFJNQWR1/UWQ9KJb9i0jtvCsopJN3aYOGlJhsO7CcNeTpt3Hv\n6jbcVeE0Hzua4QzIVtoFGJPt9g0lATFndSDfyPEYR/9OG5gYzz6c9T5cOpoV\nCofFAz0W5sZRzYpr1UwFxG51Wl73tpVvnA3kgWkH3jG0OBINbvyB0/7U0WEU\nlM0xsLS9ZGRakoIsTBjHeoJjT4jawebgwOa4VExyGas+HHXO25wZLtXGFums\nZ6V5N2wBGDRo4UZNp7HEsYnl6uwyPCTem7l3KrTj3vwtXoTB0AsgWjqtHtsh\n+4JYD9M0zF4B1NXt4DZu84cfqAFpBqTgViCguGGCKPs7HqMTtUzP4o9pvni5\n3iTq/PaPUa9KlKKRgiJA4MqrotKpnxSOnYAEagGqgFTC1uLA8yNXPkq1elOQ\nnKsv\r\n=l1Cs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm4EpqFbHXc3tlfFprnt5nCf7gU5qe27EAXn7w8CDFMAIhAJRVOdRPBrryN2A/zW+0jiHTl10wWjyxZlpzNVYHqV3d"}]},"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-fab_0.19.0-canary.a1c44494.0_1599689261652_0.37895031521141687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.be1cd1e9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-icon":"0.19.0-canary.be1cd1e9.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OEc2CgW+iERdvJNByq74abNpbdXa6MUptz97qe8BBoGxLtZauhZwQzraHt9Quj6e+IVz3+h3yrsf4K/fMlWQ9A==","shasum":"7f4c11b4c40c6a13249c55b058326ffff5d63e28","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.be1cd1e9.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlcmCRA9TVsSAnZWagAA2nwQAIaymxu1sc9ma9E6r4ft\nQ4iWCzCL1nalmgGFKSql4UsLVr8Osgqfoac2mX3zKH/XoZC2hR5vUro6WBJE\nP3VxzkqSLVejBxAGaheqwQrJooETe8chKqJ9LeH+pXMI8iZZpplh3h4yil5P\n/eoJaESaKsYPnCUil9iWElUNkr7rzjShtpPvYLjSCDjytH9XuLDGwyXnqYue\nj/9hpqElox0/Zt3ceDm/LOXIleBxHmSO+aoOeF9/QBxC7vvp0iXo3xMQSTyr\nt5DsbRqDD50is3Q06G61xuBdajUnLMo4wWODOU8lsqeO+1/lZaMYbF3gMmQS\n+nPVvINcdR4/JfkPcPWsVRvI7Ft1aHb4MKJchY651QKMUy45mAKvAML0LGwX\ngyoPII+/C/egec6DrapgpRB+h1lx1lCMMdw+cepuwXXIYqe8KwMrrdazkm3s\nuHVC+RW/YtpZ+MdQJMT3rgF98yl21WZld3+8Iswrns/Aqf+MIQ8zijSeq4QU\nGP1D9D3NgD03L+dwkcwD//Xx1U4Y1c1iSYtFcShnnjSZd+XafAPcy1aJnVSD\nwGU7/0kaWQFnWfU4efiPtsEKDlBnLrqBQTupkOc8aAc82W/m/b7EtP/JSGnz\nHSGFmsEqQiY8IuWwLlspO8isYYRXx1nZe0EHm1GthdKteImoXaMwiXeg4yyk\nzBDe\r\n=RCAW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxoinyOVs03wGbXgW8/K8KvGb4aNSLMe5c4qFMyA0cJAiA0VqCWRvXAq0Q15jQy/K1K9M2oTTd+3Mi9VWCzRJw5Jw=="}]},"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-fab_0.19.0-canary.be1cd1e9.0_1599756070280_0.8361793520538501"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.f094c0ce.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-icon":"0.19.0-canary.f094c0ce.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oDpAWnSDHLZw0SAeqrl5KvdmTT/sZ7V1r6ktaHcdoindXOFrtH8iF9E2FMI2qJ/RzoUA561j5xCkb1YWsSb6Gg==","shasum":"53f93f4726841017b3130674b56cad45f2bfbdb2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.f094c0ce.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQUCRA9TVsSAnZWagAAZbQP/i2jE5ssWojdLKfm136W\nOD08dFj894q6CL+eVt/JdNsc18q7Rz9cqWelpwVHqMvXeNd4uiYh/0gPdB3n\nuD++dguu9pwRaj1sdouTjQlcAjRjHP8zwbzHG5Qf3m3c0mnSs8P0GUGaKE2M\nmbmkcHgs8BAa30L2NvGTvIhn9m+r4v+5Dh9RQIDpB0Xk7W8Ea+VNxH4vr4a7\nV1yhjO+Dd2vufVRKPVTCWxe0BYga2CkLOaR/KMmXZAx9/fzQ+mU/y/oVvpzZ\nFn45XTQhydM3DPFn02HWy3Ss0dBVGselio1IcoGXU+fFBo4S8FSifx3uebcQ\n5hrYzXF6fUj652KUIVOcUBLqgjbu5kiFzJZGAA/hgiaotYhXaQzIEFUSOyfZ\nbnFiRmo8EzBkRFJPmtm1K6jwyj8sHNZSNoLVciKNi48tP1dO/bdO8RweKs+r\nz4TEzIFBFXrXgIvyUG1YO5TFXr/SUmj2TRTbKn5Ru3WfP9EoAeUKWQSbX8cJ\nx6EUhLZ3SzMfQ0D62nguPEc//s7uelNsX9cwbC8Jm83DAeq7XbASS1kjZ9wk\ndlbRnQ384HOWTIEmqK9LkZ/jW3mCiyjifCQ/0kp/QBJTrUUGBgi8rJDKbRsq\nU9tvDS4YehWLF5mLaYOV03PFLKWTL3APNIm2wAyxMG4l8xBOg97+VfyX48V1\nsQ3B\r\n=1Ogy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIgmRlfilK2ipEiY/ZqsmIds8l+xxhYfKVWMBQgodIDQIhAKP0I/IXBXDbuTsIvtfjWA3J5LxfwHk2GG8X6uaCtLGE"}]},"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-fab_0.19.0-canary.f094c0ce.0_1599759380040_0.39845314676539734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.c1261e7d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-icon":"0.19.0-canary.c1261e7d.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SJFR8VdmjL6PlRvYmEa/Ff/OrHY1CciJc8JKyJZezZ8O9p97HHwe0cb3g7O7O/vejkCQUAac3wNQWLO7ZJN7Sg==","shasum":"31165e1abb9b3a5557276ff7823113cd663726c9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.c1261e7d.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBOCRA9TVsSAnZWagAAktEP/2chTqxj0nK3rBoqhUSZ\nz8eRREt3OJrEnULmiN7hxZvVLjgKJjGamuvPYNA/qroYyuR3hYzAMPrEcKXB\nkurnitKJY0dQ5xw9F08eod7jrczF9EXzfgcn8VxRkgdKCW8TwFqG5BwTwi4B\nZ7UAUGBOwkO9x9xdZjOVomJeC359svS7rqTX66B/xAU3XnCZc7ORJsUWcplX\nCnL6WKUtc3AbvoUQyFsKLXyKclGc8ewv2KJ2nNGo2oVvqEiQEkBNQfCMApsC\n+yT3RC4L6xEBa/oujPu6MhY0/c79jbJwnEslhiyBnUi7oJauU9GwILalmeIh\nDBRe+V/k5DGnSx2oyFsBEePe75l9BkOjMlxLm00PAGzmXkhPtLxFTJteUBH0\nB/S7aeXUba83TnbUoAHG6acBiC6SKZuBfan6aguwltVxY1JH+83+wSGAAHhs\nUTx5M+A9eKm6u9L3Egs7UJXJJKt1SSxvCssZQfhJH/gdVbe8WmBybbTMdf8g\nB4W+crZXAs9cKyAAO8BAL2TDu0fm2YS+8vS4sFjdPFIUHn8VjFhBSi41vEnN\nw1FC4HYB5r1WPZe/lDrBINilcXHDAOmFHj851c0MZW1N10Lj2U8nqKsLXCYa\nVHVwYQnetT/lLa6hy21CvztEya4U2bvKFx/h7aNCgz7MU44eC2KkW3EMzMwq\niWEQ\r\n=PxG4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJkY4y1Sw3IHg1Vs14S3QqG5YDvvJhs0+YZ560diwyiQIhAKOrjiknZA443EXSj3XgcFN98J7Xb1GiCXmt12H8rlPx"}]},"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-fab_0.19.0-canary.c1261e7d.0_1599791182184_0.1441730459345505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.9b39ed1e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-icon":"0.19.0-canary.9b39ed1e.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JWiO3y8k8f2zAmb/U7UB0v9YNdvM0ghZFr1Wnru00RfX6WbKhW8I0VeakEs/wUXWC0D2hQj020sWk738J8gTtg==","shasum":"3fada1258dbdf4ea664f95ea45aeb95a8c89fbfd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.9b39ed1e.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCGCRA9TVsSAnZWagAADhwP/00gw3QjTFSyQVrTzy4g\nB7OjR++mzDOlevUcLWM0UipOtUmVd7YPLEj31HlqhbpwhzoYWK5CLfDhZlzu\nlWgOWUKI4SbBqczv2GAFOczCzpMxN/IwFubAN1RdtKj133uvbFFL4m7m+aP1\nN7ZCP+WAIXQZxBeGmNxH7eeTmosct29iiCfMs5cHRgI0MgCRCxErHM2wdg1g\nADWcyE4a0a25yDmBhyWQG00NDc2E7No4UmAgriPVAYtYiFx2no0HJNp3+y02\ngv0qzOEEtWlSgMhLv63PrpQDmfTN0EIvP3w4ET2m50MJUopL9eopQPGru4ne\nVvFB/wkpTUPzInc17KNylFpIE8PfrV405yiD7DoUZbw6yd4lp1p620Xd7ASr\nGTjWU+cGsm1ROTLT3f1f06ob8qtQzYJ1yg4jljAgMmp+pJj5KZ4jzSCcEGiS\na0ScdFlL0Z7Sw39N23pCgsJJYzBoWM4bJx2R3pneXIJx+IpD2ZJEg/zwupa1\nSAWkna1NLX1dzPk10JsfOWfWgkcnrmlsmy1jNbi4oL8ifuhyM77PkRoFZmuY\nGvtIPg7SotFrE1sqd6pVQub4eYxxIU/ghzlIUqy/kTdthjKi0sQEY7n7UxE2\nGitrZccchPgLipdCTjxMYSNPqsavaYaZmurxGlUm7y/UpJR1nNhyfQyGgzRr\nC7/q\r\n=vn+V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt46gzzpPLXhi97doMn/apHlA5fVgGLqDscYrOCXe1KQIhAM81OrmSv83NruiE+jl45yn74dH4zUK0/zGubVx8xnMr"}]},"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-fab_0.19.0-canary.9b39ed1e.0_1599791238061_0.998823883908456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.e67214b3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-icon":"0.19.0-canary.e67214b3.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Fl3jXMaGVZJYpmHLxkD9WqEsEdZeluXHL8kT+iFVvxaGQtmogvErlgnYWW9UTA8MekrQ9N2ZfloIIMipTKmUTg==","shasum":"98e49180bd00d69213137d2c8406ea0a01159c8d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.e67214b3.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGJCRA9TVsSAnZWagAAT30P/3wCFw+KcrSzP5Uxwd4W\n5FVj0h+JdvcaAxcUUz5Ad0PE063P5cgmaNYxlTjDecJFdJBdOWLWhFywQTPR\n5aRANK6Ftb7krHWi7nK5Raak/AEZ7ggYLPu3qADYNikbDRZ9lPiMi8RXEbyo\nOtTD15PQ0qQSdAvhArT4MrGAfBxmmoYK4D5icRk6tY/kc7L4JZsqRqczHjQj\nBtpaIi1zslMQRuEHREoPvMsHsJ5iLwtOaR33d0c+4LJJRNKArmgrsO9aG7A8\naJvshrACCj0HnoGh2RIOy6noFbgTB/jKQN2486hAbfBcUdDuKFPhW5Qu60z3\nKI/A1H0kndz6GequHfAjcRhJ8JxSrjMerp+ekUb0GsNtGT6IrsT0gQaoYZ/H\n4Rfx4Mp/qH0p1rLNKKrIHz+myD0cp0pMXGmhaKvzvgDry+fxkepbkuhDJTO9\nxlCkgw4ErtZJe4CycPeobvasyG1WWvMFyUWGcCHey6QDbVCda4DMNfy9MMcR\n5YMY98qR9go05/FCfjYa/nMMtY1SPgEcU0R2uS2CJPKY4+FZUEHMJxCfz6AV\nW+gFTSD5gDeffP73tVRbbL2l9/gDYl0j/dThsBdHaOugNQprws9jS5IM1KpV\nx7SvBAfV6qCkZfaIvQyHEGrFtLvCGJmQg1HrnJyLkqKq0S8qyFYNwFj5EpDP\nP9/I\r\n=hv3j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPyvkBYqEnmc4Q15JjTD/JgKMWt7cLn11GFJnsCoRfmAIhAKnwsYc7Goanio16mwzWxRVNfEd7jp51WFJ8i1XtYsnk"}]},"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-fab_0.19.0-canary.e67214b3.0_1599791497389_0.24715544762235075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.36f5da28.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-icon":"0.19.0-canary.36f5da28.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gcTc9tdOgqrNIVm+HYiLPW9jJRYJpn1WzCVPQH73UZAJYGp66tXUwoncDRbSbGEptbYuEkiLfooTWXielQOIug==","shasum":"83e098a67b1d1d5011e078a7e46c9983cd0e096c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.36f5da28.0.tgz","fileCount":16,"unpackedSize":68590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIqCRA9TVsSAnZWagAAQ3wP/1IOK9sSBvgIB+LS/m5U\n22cMYIw7lDIij9iC3ZU8eE/ttkoCggEKlncGkL0G6AGEuD6U5baE13E57YxN\ndc5kU+FQflUu0pau8wl+jHqvfisqVF+9ofQs2P57fdHq76C2yh0SuMcB7Lfq\nOWuqOXetpAkBEHVR9z4pMr5spjDPNujv+B8oXAt2zMM0NfPsg1SqJS6okeEq\n+J+Sv4wpknIdG9dmptERNoVvwxcq9DDtjJKEqAzydEHUHPgXO436l63gtum2\nyyVw5CasljNqPt9wxm5CYgMwIkCw8hstoQSKvHJXvsvBlCrWcJ9V7HQu8tt+\nQpF/Tbells5/6jzzz9hVI7XNZlLljwriGaxtOBKOhUJbhVT1cL1jf0Hs/J8K\nR1cDREtrzKp/A8S6u7OSeAp70w3WBgQyNZCWVvKuT0X2AiDzxb7LGMTNGiCs\nBD1Wc3DCN4eWN01q8dUgQ1nz3tn1i93pZUDc1gQH+pdfRNZGjB9O9NURvaDp\nNyyqPTSjbwGlAZIBJ2NRPHes/erHvUZRAd1QqJ8wUr1LWHOgsgYjRUKdz7JZ\nFjd2HR4ai/v83yyxmxM2cXQ1Q181Ab4J7E8l+Cv0X3LU+BwWKgYjpOj4bNEm\nTVNeXL8P9Q+cDvYl9n7eAAf8al8L6OX+5gUCXWBD7hPVDGwCCgn9RQkY5SYN\nIVyY\r\n=1GwM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC9xtobUgNNpc3jVqqfZBac6icRklpORGmORF4MWlrGLAiATH9ns8dFTZxQhCGXJ62B5ZpJDhEpAPN23YXctzndpAA=="}]},"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-fab_0.19.0-canary.36f5da28.0_1599791658517_0.8408374167395276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.3babab12.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-icon":"0.19.0-canary.3babab12.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qPlUdiWO1EuJc5XCxRg+6s/m/VT+ak7N0gJWzam3rz2aXsTRRZ7pkaOFhFu9y+PX7Ng3dBeMnIe5gNcz3VfqFA==","shasum":"dfa700fc6525a498ac3fbfc5acdcc4c7c15b2d56","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.3babab12.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLdCRA9TVsSAnZWagAAbLAP/2auiSuRK26x09udmhIB\n4eYu177ajHni40EgV+D2XdaWbeXsWx3+mm4O3IBUQoKPiPf1H/O+ZnqCdZgo\n62SV8DsK2SzdaKlb5Xz3WCh1tbF5ZqxMkJ4rsCsaet8KS47VyMhBGTZD8knO\nLFp/V/Z01tRAn9UNGXVsFvwrhghu8kN/ypIrRISSzlFCZgDkfgsUM+G2Ha5r\nhowow9khttxmwC4yJrLRycgdsXjtAD2hyZjjSBqc5qmpY0rVAQ0K6JQB9vxZ\nfN/hF7ROh2b50gGhGdwgdQWwWLwmTtMih+jO5cybJnP9YgIjc7DUvE2naWUT\n9No7QjF1dF+ym8yaTUa5jA7zCGb7ieaepnpPU5dUvYoyyens36YXnbAc6BqE\nFP2zvUDR4RhAZuT+CjClcixYVm5A7ufSxoMHS9PWDafots5KXNMNnn1DL4wz\n+jp3t1K9+z9wbjGtWg3K1p1aPDOLBGHOgqJeGlfJZ+cNs76KKeMo3n2F3N+m\n7AhFTnHfxfYWeVbU+Jlgvrz4NRJ+WDDeIGBSlXDEMaLfpFZKtPrJFWlq+9fT\ndteB8LSXsnqoObX6OdGW8hE0TmaYwaD/M7tlITomN4/Chi9ezL4Kg6i5WCvE\nGOMbqakGjtyKAGxO7TblfxAg1Mmv2LO0bcm8EZcpTJUYGfJyDBqKzAxdLD9q\n1sxV\r\n=clDV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIECH4N/ff4ZFZoouX+FVdMmzIx5Tm06MeXuJcdOLW470AiByLUVno7DOZastcOdzNZclOwBVTlglcGBzyfsT6hKczQ=="}]},"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-fab_0.19.0-canary.3babab12.0_1599791836855_0.3366782567033111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.a4481e6f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-icon":"0.19.0-canary.a4481e6f.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GYXdS+HaHfLadk2lLvzNkrx2cZ+H2cfpHEcBbuWWrQwv3BtGnkmOakidhzC4UiaZ6NJ5ZkL2DumlJdYrFjnNkg==","shasum":"a8263d4d2dce0be1cbcbe290b5f52f46ef436fcd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.a4481e6f.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuW3CRA9TVsSAnZWagAAuf8P/jGadPNzn3zq+PLwLAV4\nP+fYvnQIicP/2PRykQQ+REmlSF3dCJsuMHKtxN/AhqCoa2YafVD8EUEcAJjp\n3rf/g307C7RNbGbwv+8L6ZGpEaKQUBja/DR7SZFt//Ou5KxWMzZ1tbaJ4lLI\naRByLApTtD6oTq8M0wAfh+X23YueXzbcasI4x1WYfnzNB+kHlTUzdtvhWGQL\nYS/tFn56VuXkSQQbTR279Z4C36DFT481BFssXXrMAJ9i9q/+vnydLIIi+swI\nyfSmv8oWhgquZnL2Gv/MDLiEOf+dG6mz5wEflI728sQNMjxZ6/abCPxwvw3q\nHbPl5nTYzulNkqlLyTky/1d5t++186bTVdiAmn1kmN59jrR0gbxWwRKzTYOc\na67OJWbFA90yCRf6XddpwmZfQLK0kLf98Uv9Sy3UWXVr3DItKK3tIUrHDadg\nxT642LpULBF8E+aspcDBi7sa+JylLOIprIJIpXBc5bNvhxdCnRfes5zWgDzt\nATuhXNrPozlM/Vd457C8A3Hox01ABSdto1djleRPYb9DVCp3wUIExDtp6HYL\nu3ZofXO5e2ZqwobFCnGbUDEtqgu8cMIpZBxZXX2HgBy/HBxYvV9kLF42dJpe\nwbNgFPtXjoslE7Ek2ECZE1uQkcHOrt0Ld4sEBrV7HYz5UkHpnNQwlYfKVPzi\ne3MO\r\n=VLDO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGL1m6OsNc4OvdWlHPuoFwRViNK5+DJb+eE7NgkfMqHqAiAAg5GILvWqWlNGwOl+qN/YO0owJS9cy7B9+lxrPWVrZg=="}]},"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-fab_0.19.0-canary.a4481e6f.0_1599792566627_0.7802147339953414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.a9177836.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/fab":"=8.0.0-canary.744bfe5d8.0","@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-icon":"0.19.0-canary.a9177836.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IxICCr0tCSaJV9joqsuiNzvY+4BwJhhyNpmZddmboTYf0LOOBDvr2FWIxP2jVnxhTXF7FJ7O57GDqW1eg0RqzQ==","shasum":"99225ccdcaba08580cfdb9e9fe916e6259fe2191","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.a9177836.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7g1CRA9TVsSAnZWagAAVbsP+gIg9Vfx43ZfWYG/ONAe\nmESZw1K6vUaBtiC+6308G897wLrXfDyDvK0nN0uQ+7SJoiMye6/x4MmcFOPc\nHBOwjHTDBb9oo3p1h6LrqvOptFp6McGSLAd5PSvMRXvfAfHJyMfGzQ3TQoGX\n4i4tOFIAF7QuO9JevVu3mFwJEKvW/H4IZhyaLATOv3XxJunix/7uLqyUrbQ6\nGngWZJ69i8rNWHTYUttNWB9pW892sFojgCaxDIdjsHIo70eNZTJpQkaYG7BB\nmBUg7ZLNN4NcOGh+bmb4MCCje9EIwdPmlSBYCeuxE9Phru820m0pXwhIKRi+\nnDWgeqIZRAmPS2oTGcsyXwvAwS70gG3IuR599mjykZy3Q5aHsWfpZB0dhWHS\nVbAA3Mzwrn+NRIotg0KjwQOGIZUNEDvfhsxX4g9B5T25Gj6xko+C7nvjsaS9\niwYxmnP2pLLEJ8l8qschdKWw8nDmYUsCJcY5WW+DZ2lIc/c6kHmnwh+nurso\nYGc8eLybbcevOQlk5vWnSVQl9gOwWR48VvowfFBmfgSc28b5TEz07qbVHhho\n7gKJlOTf+JtluCYDmnuKEJ6L9YkxVTM8waGltaQPf392hp9MJ5hzhU5V2BeT\nqnNGvA9xtkWOHJiPOLVSdm0gOG6wqSWOfKVkNC347b5x0Q2XpCd7ocE3SLzD\nCAIE\r\n=8STH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQz6s4VNIMXrUU5k8bOTW01MMVTozfaMFxe5GlGRvTlgIhAOlJnGh4nG1iWBKUNRa4GQjEnurevim8D0omvmGKOG+7"}]},"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-fab_0.19.0-canary.a9177836.0_1599846453303_0.9824898785948855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.b102a3c8.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/fab":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-icon":"0.19.0-canary.b102a3c8.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Jk4dLI296PmEKtyWOhAfLIT6vc54upfbDNtztdLklGPOKklYrZIZ1S/Kkht8ufNhYSOzt+4OQ4ONP2ouhLSruw==","shasum":"ef5baa91804e70d524a6974c3e254cb534ddc095","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.b102a3c8.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87kCRA9TVsSAnZWagAA7kUQAIea0olMwF2fGA/rzB8x\n7zSQ7nR7pFAvntyW7NujiBWdZmGtYSx36K9HWz9ukC6RNgPG7edVi2dr0uFU\nuAI1tbaJCGyFABUoQdoVgP4A4LQerzCpr9Wl0pnQxr79/G1Mk6SoRzJJYK5x\nkbZU0ERdrDdr+IL/ttETdzXhw/Gwb4bxOJjQO+u5q5UUy9BU21g1pI3kpWL7\ncpGzcRbN4R0UQEpAgRawy/Q4Ig+sRzZSvRCEQkKr5dcgw8JIRLDAE4h52lZi\nb26SHvExUyso7qaflJKvNkuPvTGA81v7EnIVYfcHoRnDuzb++ictrsDmfuHm\n5KEUzevFYk0YmEwTbksaWbXgQn7PNoH/xvHYTXetWBUQeCX80oxUhY8IlDOd\nreBzqrn1NZlLshvGrzYGuOxcGX6a2c7l098mP9lio+817tQqIf4ANp6xcRJp\neiq7tM8wB+jm9RQXTwDDEiwE3KvoNYFhljA51AmbXO5QQeWFRYN6wQoJxCMg\nnHDAfrAWiaJwlQ5bva9xNJgv8RSjcM7/MLRUfympNayUmN4EVJ+5heORZnVH\nrJxFXxyuutlFWLQL6kNvhHtfLH4gcrKJhPfm+FDd0J8Pv+uZDfvo/aHWiZVQ\nf/ha3tT5sbpboK5lOm80IdvNSOYaHtJvEAcGnCmF5zHH8yM9246GKRKeqwbW\ndgey\r\n=+sAM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICLLF/qNhFQgzJITMH3erhn2ivwZI7gxtoNNn2QBuwodAiEA8lqnit29jiks0DeZjkBf2q4ULwhie1ydwCWxmzeL3JI="}]},"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-fab_0.19.0-canary.b102a3c8.0_1600114404172_0.8424666954500741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.a7fbc707.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/fab":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-icon":"0.19.0-canary.a7fbc707.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vxa6pa4flYPLxImwVf1AE7oG3z1I0ws0Pkeu3TwpT7EhY1G1sFTYW77Rqd+k+CWKxLYShH7II/8r0dXWwhE5CQ==","shasum":"9063e3f526a4ffa66d1f18624a6870c4c2b9b131","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.a7fbc707.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZTCRA9TVsSAnZWagAAJJ8P/jXvAewVn26RlpCxDiXc\n1ux82KBt9ljQKQnw6UQ4OnM2G2aBWFVYvp08WEpe+qX4S/Ncr8VT3rE3anSw\n8jQkCXODhvwvC/7EVZrsXhhJ59PdpRYm12XUrFBEzkvIncaE5phIj4UBJvG4\nSAB/iBSV/p8AkkExjE/bpsl2IkCldR9wWMjUeBW4GAenlZfoZ8M4Pk1+9n4z\nXQUmqlfK7uMR1Q88TAj9rigkUidU0L3OOm1b9G4bDLR1xWNn65aKJ5TyhKhc\neAcvdyFQCxM9Bx585fKU8RVNNFcCQ455tpn6Slsgumj/Hh2iKO/qRvgmoSUl\nimooHj0w5V+FHE/vH6X/3r2DNaHuoE4M5YCr9zNAzDte3K3XuFW97WB0j4qa\nW233xHrlFFx1pzMlKMMHOVdKUCFAVK5HvT6Um8bxAV13L5Is7+nAmuXZglgH\nYsKSPkUg7LDC6EtambdQfPib2Fh2TltoRLtO0spWLPoXg8IJBKjv7hMjfKzt\n0XXTOxLZaG+S2tjQ8x7AcVI3B66w0eYAChPl9wy5StEBnYI/vspJUeHrEg7o\n2q7v3T5HeaodAi5JeSGJ79nsQPVtIFaPQ72zZ9M9BJbeXlT4I/KOuxBBUOu3\ni40t9ucbj5Az1wNvkmqhDPcKad7eAMNOrOTCrb2Nb20IGnNOUUCzrF3wDmi0\n5mLw\r\n=2bZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwsuQrNq0X8C3mRcByB/S9YDuVBFuVjAbnL5jbAJVRLAiBO7MWOI5Sn1W2p1zpg0gumNxIo0ELHUqRlf9S18Fs5Fw=="}]},"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-fab_0.19.0-canary.a7fbc707.0_1600185939319_0.2731711927611893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.ed6b8660.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/fab":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-icon":"0.19.0-canary.ed6b8660.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4U8Vupqh/5/I3QqSP9d315arEW2HrO6VBjMxKBl4QSemvrMkapAX8rlxdNS3jgaOVWUTgnK7Mntx6KW83QIjvg==","shasum":"6cf67fac5ed8b1a2f8b9680c38c6ad35665b1083","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.ed6b8660.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjnCRA9TVsSAnZWagAAVQQP/jdgl8d92GWGNZJriZ7f\nPC2u1/sjQcNFlvFxGfBLJoh7NXhvumPz81Mh4A2J2kXzCWC9x52roM/w52it\nsYYN4ODBKNWg4cwS1XfqRMT/Zc31AUiHr7TpPD5ds357C4o54QeDOG0pysfp\n+iqlDheQ1KEX+DQA2GSaUJ2UJ2++uxWtMKd8h2YLSj7B13Pg7D+UDUL9R6+f\nzvZpW0BxQ60pADrSzG5IxZ0DkcxJ/edy/mxnU3JIdf1slNvpwnnxIM/ZPGcP\nz+EdamD6zwTKUkRguR7mz5QhD/B00PMaAHcYGE2s/EF9/JuC2EBOwAVDa7TQ\nnDOK5xY2A94W64BaGIUg+xkJD/lp9CvQ4j5GXXqZyd+bSCcdKd/20qAc/vgM\nIUBKLaxyvXKUolO6X32WiFrDPj5uG14MypvCM0yhn1QRo0EtM0ZoAZNc8L9V\npJGoJjmvIPUkmxjeOprKu/1+QyEwVMH+phJBw9adHbMzIYSIjGw7CHI5AJGm\ntGo/I0mCVm3ay9V6CxQz/qnx0dFhKRir9uxERSfOb4S3uHwlrBUolgXd/prx\nBA4AEUAvr1v6g4fGpHbbiDO2gc1DWgE7mvi4JII8ysB4uRB2lwMODRe8fhuJ\ndPGFbZROEoIPoZ23aPTxLtQXG4/5vAYJvLZ0KGW32QngXzkljHVjkreU0g/D\nW7Se\r\n=9eyt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDugKwxbLb3vUbD7/KvcDL3aVp/ie8ATuD7getddjvx6AIhAMXN9ill7Q136zwhmlw8yG/8NG96Zow9/U+p9SkaZoiP"}]},"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-fab_0.19.0-canary.ed6b8660.0_1600190695563_0.5924570694416635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.9c2331f5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/fab":"=8.0.0-canary.319bf66de.0","@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-icon":"0.19.0-canary.9c2331f5.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-66M3DxGqpxEuD2Z2ziVP5nx2sO5DBLa/JOWub5yI1ZnxF7nsmTqCmE/xu1wrsGWGQbWwYLl1ZdnG80VOEFmPbA==","shasum":"0e03a3866b3f2d8bb2262dd2cf0b34cb5d2480fe","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.9c2331f5.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6mCRA9TVsSAnZWagAAoWoP/1ZfvK7VaN3Aj5Pdj1yW\nvhqKfk1uKm/WVkaH88IA895/RkjvZK4RMXQ/dAxYiIkgPEazX91pwcF7n+x+\nBIkh8F+tdrlBanvv8bE3u7YMsg4GKYUQZSFMHNh8FL/LhIk8v4Y/meSZ4ae4\n/XFFnY1E7ONAcoaKAKGVVlj3YweHxLobPSx3o3WnEZ1M16Va7L4Qj3D6YEs+\nsstXNX7I6XbwwxAflftzE35fLiCAKmY0RgkUQfCic9QrnJuUxlcubI47RaXp\nS09YVx/rV4IE2VA0ke1Crk1vuVNqPJOhHv2gjisTZXckbsfGWGfJkUBEoNhA\nOPBu/BR8Umsd7Ugufro4QrXRzp2lG9KspztfxXK+obz/O88rV6U6AI2pSksS\nOifMFaN+dlrn4O56oEzNnvugr8GS/Xu2p4zKHgxNNue/xaZKq/+Hz4XB3gDa\n1tvFhvdWpurjEsJeaPdB/9yI034GkEwBuFR+Qt1fioBrEvCTKFj2B+QjoWyE\nZDqT9C7fSKnEW7eF2Vx37HFlVS8J/5B89LmHBDWylNc5rSrhufL3yE3Use45\njk4M+NGDJc4MetFMGr5JlSvAuViVbB5fHH3BleeSDnmzZeeTnUpnhlIXvHsB\nIjl2fr4+hlfLz2KWMa57n0gMRBvjCXH8meipqTSem7EKwzag7LmUlWlgPiLt\ngAMo\r\n=ewuf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCRcp+BVysAeQpCz+DyioBKX+UDNwBJanFbTH5k2Pc0AIhAJUGUl2A8d65OPn9qU7dGYByA/0DrzCidWPzdsaLluUK"}]},"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-fab_0.19.0-canary.9c2331f5.0_1600192166038_0.8816503990103708"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.63a5f088.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/fab":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-icon":"0.19.0-canary.63a5f088.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZfLy5preKpr2pEUke0g51GD8WjaMLR/qh8IwiqHjlIFntbdOeYxPXYfNF+SJW0kaJebMBd8Xv7U2cJe87s0KWw==","shasum":"857fb3639a4a06468ddede8c4a78079ba4eabfab","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.63a5f088.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoW6CRA9TVsSAnZWagAAGFAP/0wy6L/EvS80TOU/iL9m\nHMKS9x+1KrrszLfNDXsqRNiwc9dD0l5lZtYK8CH+JOM1rTBKB1MCddjkhQlB\nLBvK3zzTb7vxtactskj0TNZCck3zPxq2BftxBlFJcw7FGEH0UunjfUQVjZFP\n16Gs+4X4aOsyPtDVQvhzd3g9bcF3OWl0N2IBjoTmyYlYSGOhQp+5wmny7UWL\nV7OJM8bdfTOcM40xQDX79xVzWOBbAcA2f61wGmuPp1YskeDF4AdvLZBfwqHH\nf0QjQc5vwYkvvJYZilz3buDLMHTVLXFXJ+/NXhNA866C/UyfpRielj9MvX5e\n2rVlJNs3Z0b3MDscBQwk1Mlo0ZHzAvedIR4vx+lytspil8ZQzMU5TNOqc5Xg\nhyW8i6cw48azkUpKuSHK+Eo90e8VdVu+0XLE3ch0jPAaBbzPnulhCLTVxMv3\n/IzlGr3oolWfM9jX5NSfo0z0FZNokPRiocmhsjwUgTAOm3cDt0dIrgZINRVy\nvLIoOk7qgHJbP4USNvwYgPLG1VAFnyWEdQkPywKm+vSlIP/j8I/gdZ+RU8K/\nPzD1wHld8KOeIEiq5joq3m2j/flz4iGygGMj/0fhMb0qRCzWX5jwZm6XFhyA\nE3oov8cL4+6HvujApefP7CqSOq/P9ErMIzNFeHCIGvxjPc+vxMzsUi8EnqSM\nXRuz\r\n=n5Wj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDorhM3Hc9likK2MvQdOdJOD/2RHLFIkX6tOUNTzYm3DAiEAvlQ63GB+5n5TJa4y1JMjVY+Wq0agxfmO2NpUwZNBYp4="}]},"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-fab_0.19.0-canary.63a5f088.0_1600292282346_0.9452893731246768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.b7995e49.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/fab":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-icon":"0.19.0-canary.b7995e49.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-d1mIdoAIinK/OZgm6Svesr59jp/ge8Visjj1J9pwO9zo8PcZdOEKdk2B1qVQYl+E9rlWF0USWg4jSdlKpHxGFw==","shasum":"0621e9cd6f3e98616aecf72804c5fd03f2b01112","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.b7995e49.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8wCRA9TVsSAnZWagAAdzsP/3vfuyPLLsGKMTUeYh7K\n1w7yULiOUtmUiYUdyIwJbr+VTYrbzE4lpp0TDZ5bw6oLDLuZG30OqAnfy1TT\nYBkHAGEjHuKGhBFrOmLrFAE/E88lvB+LBGZNTEZih03GOeeKs+eLn9/fbzyB\nRBEC6E/I5TqVXqzVsMgChyy+4/G13x5jaop8KYAIXjSqEkI5cIQXYXdUONar\n6hTCCbC7kXYvDou/AAJP3CPikzhSYLLVrviQh6zMJzwNZnhBHwkSBX1GI84S\n/+veJq4GSHMLsf3A5TiqIRvp7OOmMOiwYhiCzTqQYaT1sBI2ho+edDDHsvI3\nsmbMWN9YB11ylS0bsuQPg2H10wB5Dw6zSYdYmFar9yrrqbgLXJPbHoavsrNh\nOVT0aTY1k5EFHm+vahvx6VvSJS4+vwgrwTUp52x9MvX2ZK+Vw2pNSvIWO1Xk\n8hB28jQ7hS7WpJ67dmBxPPHPin2yeTurTSLiBCpHyGiTnRzU/O7H7EYiY6a8\n2Kfi0SWJHXW6qP7JpAxFgzOKDUh4H3ZjWuqer+BuDAZB1YsN6rndeLv9GwN3\nrIPLdcZIgHbKry/la4nW+oGvhQ7+ByShCTBaUNU/CJRElzCzKxctHnR65UB6\nDp1duC/XW2uWIl61ND5SzlO74taAlY9h8RpsOu3y+6XNjX3y33dQkf6+ZEdX\nbiFQ\r\n=BlKP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBbY1a4iUr7o/iCXvRnEAYyZhp0oXmeVuBFA9X85Sr9AAiBpBPqwfTwfekeROzA9XAOGu+JIv89czjFKd/BQlJQJpQ=="}]},"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-fab_0.19.0-canary.b7995e49.0_1600298800061_0.6907173261961654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.0da3ec97.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/fab":"=8.0.0-canary.a831d4799.0","@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-icon":"0.19.0-canary.0da3ec97.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QNeI9ZxC6KZBK3pC6aBu2cG/p/hMfvngRXzKoSF3+mzjSZjhqLYTFvit001iFOCgQefdvbKvy0GHtzIHZW5ZxQ==","shasum":"fe14091a454e91526baaaede7b5768c8b006203c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.0da3ec97.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRsCRA9TVsSAnZWagAAgYAP/0knRup2iYk+bANxfMT3\nGoDWvYXr4pZCLhyjj89ypHtUjAdU79Uzn48NWz/VCYCI9ExTdJGeK2/kfyXc\nPlLQjXmLhWUz91VSWM+wM/zFxxRB5/d5lW8nxJcuV1RDuYbJ3DUH1oQlOTYs\n8JrmUBTKFU7+Io8t3iYEIf7EGxUCPo3qaddi8PW6lo47+9+PcID+7kaJg6KP\nf0qHIabMmvnj9dnybJKDIJDRforDx98pXd6QiUgcEfR+T9GYmFG3y9zcmCpW\nzKpa65bkP7pEBXIAXsZqnFKS/Xf0APEBUL8ayOwWOJSX2GTA2zvepN2YM7Gk\nHR7wmnaxSfB/GZwLgZiuta9b2rH2W8LOxhoJz2b4wboLkF+lV6AGXPgBmUl9\nM4QLGRIJo3hYsx8glZz7HMY6ib9h8mZKM6XtkQdC2gxlfKYkONP+Qf8U85CP\n8tjHHr7JgXcBADCQhcYsBpTZiP4ghw0JY6eGcLDLh8m7CmaRR9PXCU7hB71F\ngBMyNcYrxzUnNxbsZF/gcJaov/VE+gVB/cMnJ+SNKXdUPKInNcWQIgLlVduw\ny6JzQdOWWGrpms1oBQgpiJvYhTRnLD68C/YNgRfRGrZqnc3TcCSs4IYcSwkr\nKZggrbSNHj4fYxhB8sfmhs5iDw0x7Ss9r7ejhdDBR4czepDwk7AIm0EkGeUJ\nV4J/\r\n=aQOQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBN9UjtWMNc74hxnU4Qjx4PQZG/k3eJd/erVGZSj+50AiEAzGmig7VD+1Kt/QCnnMGfAkRt/dYYbfOAOt5QgNAcx2g="}]},"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-fab_0.19.0-canary.0da3ec97.0_1600726123968_0.8885295587962898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.a0793c96.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.4e5c350c2.0","@material/elevation":"=8.0.0-canary.4e5c350c2.0","@material/fab":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-icon":"0.19.0-canary.a0793c96.0","@material/ripple":"=8.0.0-canary.4e5c350c2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rA0th9K+vUi26kU2f9efdoz6dhG0BGZCELRFiRak5q86vO1mTNIAi5l2nEDVlskx8l0urBrLZIGMMsbCI1Q4oQ==","shasum":"87104456c567f43eb52ba5870e97772062709c66","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.a0793c96.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6mCRA9TVsSAnZWagAAQgEP/1Xv+x3aAo83Zf/Oiyej\nfP8DxMbLxXzX65W1/g288SB/CySAv0Kptiehh94l0kntzdmKlR6NrHI0EPdK\nlee64hWHJMEhr8ncAsqdzY8gsHaH1hlDs4Q39+toSljjFU3tCbmjUkkXPg8p\nuRxx77gK0kZk9FDaIU0zxpBu9b4ppbeFy8TuZYZC0G0aUGzUsAmipCPpsyX5\nDe0Kuv67QntCYrNsE5Yzo1tteG5lSCmHJ81JyUu7XwguZmH53L1P2r1JliiB\nhswBHYr/i6hdLZU9g/pduPUxJXrAWtBUkVZAMSMHGidwVH1QiuKI6BqHJ1Sx\nSZpCj92bpGypGSi36kJsmdfKc3XCvvXcp+E9QypZY437TonbPgtvlbqJldwN\nznnuwArHUdeLdvBKdyq108m6XTm/DRl361fXP06M41IIDprkwhOajY5ZpeBa\nRFjeg80nZ1uyzfpZE1OK6VKwCfvEqRmeworH2bgCVgZ6cKl1PhE2WmKU0Fh0\ndX+rkRmIoE17oWp6Gky9vAPuEUlJ85TlsE0Fosx7KS6PPBp9XEr1Y9iqtOZY\nuEp/lwul9u2onJGzTrGPu0SoN0FTHHpCFRiurS1JGrWDV+yOTXpb4piXC6cE\nQdNPFWjPe/XNjRUxBTFbq1aKL4zZkA2OPCmB6TqAQ97pK3OiByE0QGp4gZnZ\nrGCT\r\n=4gGZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsre+CJApU9ftHnIwTLtxaAWFq/mRHaS8no/QasMcUeAiA9DhfivX4GC39q8ttuPPYMcCTjCC3ZAkNv9hN3FDZ/Ww=="}]},"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-fab_0.19.0-canary.a0793c96.0_1600794277606_0.9667567664364063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.06998a3e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.4e5c350c2.0","@material/elevation":"=8.0.0-canary.4e5c350c2.0","@material/fab":"=8.0.0-canary.4e5c350c2.0","@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-icon":"0.19.0-canary.06998a3e.0","@material/ripple":"=8.0.0-canary.4e5c350c2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-zXim1IjMdYib7shW4MZi4Ys6nAQ0NH6OqZB40fBXJXfQpf7W6+gYn+3PDB+k7v23GrJ1mZRKPu/UInHjyPu5qA==","shasum":"3b00e043db912777bd4d3f8e42812c0fccf6bf99","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.06998a3e.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGtCRA9TVsSAnZWagAAqy4QAJm9WwXm3CkL+8jjMvPY\nWlBBcDkYJQK0/J2RpljdBbKi5z3wFNMSviWyCQZMvW42ai6oH8HQpgjo0S5R\nJdiOE/c/JJtaFUqrNfoXrWo1EV+0dm+Gf1YDeJMaRXpM1iYqe1p2ad2iE5FW\njtDFZr74eknKrGjleIISIttX7SE4BL26pOmn46wf7VbUB2rW40iS9EMkR+XV\noIdtjwXsrHx/PP1g2OfTHLfrwUNRtLzGe4w5durc5zTPmB+mugofpOpSiroq\nXXHEGNbbTQM45yWo6rqvNVzZo2+ySI5hSEET8uq6XtzU0VCpKFRehOFg6atT\nEXt15JrOYgR7rT8Vu2ppIqx8UbMm+pEBXxP8tGB7gxkW8v3dvqx73YJJA+BX\nQNy6Th5y9AJ4YMLH/bxFhCB2GCE6/+aMIIL74VRrQHYS+Q98um7zbqQmXQ6x\n0qLxzliFIpMPFSUB7qdkPmxH6wHffy3gnQh6+QhGrmjqRBhAND+25xn2nzKk\nIJf1940vbhAPAz9ijQily5+DOpDt+wPsVhxVZr9LA0gmcT7eCE84JPveSAKX\n/MqMtgXFbupIpAftdESzmkeCt//HMDtJ/isJcaYnuIF0YdL312ahwJ3ggF/6\n1eritCM0jcWDiw67AFaEQv3m2fdfKJvqPJVaaZwblKxsFQ0I9nN+7bCZTsBQ\ngcON\r\n=P1pT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA14745azsz+NRLKmM/+ilr00tp0GGXtnwC+WihyCdPfAiBfc0mNnNM+N1e1RkLj2bru6quXOqkvZ1Znz6Wrq9YKfQ=="}]},"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-fab_0.19.0-canary.06998a3e.0_1600799149460_0.7682998993786767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.3484a90d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.16c563ef7.0","@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/fab":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-icon":"0.19.0-canary.3484a90d.0","@material/ripple":"=8.0.0-canary.16c563ef7.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JkSNf2qGl9/euTaUZ66nj6yDtaXznb7JzBot6PwLGxRXG66R9GTgm5XNHq8Mx+2wwoKWdpYR16Q3oDAT1pWcrQ==","shasum":"8a6a73218028f0fe55965f816eaa94ec50f6ead4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.3484a90d.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTdCRA9TVsSAnZWagAA+WAP/3of6WECBztcgewQLZkb\nI2zKUiPNRE8ajAi+2tbrmRWUixVHcoyeC0SYxH2n5JIlwZQiDqzgdrXJO4oa\n8Wk9B2XiSaROASNtj9Mq9Zl5rEEzfndr14bSFqJsK1NSBjRc8XQK9v40+mye\nfrGbcYGRa0mTpo6mySBGsSmPoFJ8NavyJNbfqiuvE/EVmTIMvkN/pNPPVh7N\npcpiZ11AWiLQsEEPidGBq5aiGit5nmMSC5ptv/xWCOMRFsXl9ZFZToEA7oBe\nNcwn8EQlo4bXhpB7Ex4eyeooTPIkqS86oZOvedpFTr9XzGJ+0cey93Gy4De6\nB1eOiG3yW1Laj8BFDs1aewjRHH7lLO7UG8wrq++r0m4tw3Lkg92z8eMPzHWx\nHnhYRObwk9TqVhCmq+VFirlWawQ/MT2CnbfhPJ725cDvmWwNljRXwmBzaDDo\nz6wbEIdluEBEHZoaISbsWRHcY1K1hPMlMU3jugzbSTqGmyEOQZV7SSlj8fbB\nH5OFjoPaftkxf+Nxwo3335WtK4ssRkY0W7MgGVO31H4gY3Dw6P1jVenOfu9C\ncPrxvkVS49A70lQwPVSdNuIuSxSyosZew50wYBQYVsAm62QJCnanGpJ4zoxr\nnTnMCiI8sKyxwlrJkEsU1ZYk62nDlRatmYiQwCxAo3+ooPSGNy9dXnDtdi30\n0MuQ\r\n=LBXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJMLqElZ0oMUclXkzSlHq6ywULWcWp1i4aIttIskcVAAIhALKRW5XDEMWJkViMkPEl1qPXAUOhvKj5HRaifx3kWNaK"}]},"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-fab_0.19.0-canary.3484a90d.0_1600812253131_0.23794661362448344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.3f99af40.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.16c563ef7.0","@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/fab":"=8.0.0-canary.16c563ef7.0","@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-icon":"0.19.0-canary.3f99af40.0","@material/ripple":"=8.0.0-canary.16c563ef7.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nNHb0gxeDKLPSjPWy26jCYzo0vFBQqMUKALXXPXZySZdsidVXhZnv7SLmJnTKMCuq7YogcEdx9nfFPBIo+lL3g==","shasum":"ce1d1643f00349a41f7e9f80bd322da9b49d41e5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.3f99af40.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSn7CRA9TVsSAnZWagAAP+0P+wZz60hGKYI9GHa5ve5g\n0/QeeB7WMAFAm1VkY7wboNACitkryZTZF9JItcHd0CaNZOeZVnXiAe8JqnrL\nyC2XwTNmNmoqWxbq25oCuRwV2vwf2ZW5nFUrMSiKq1gJt3iPmcGe0PPsCPWf\npaNDwvfG606FWuvGluhN7q+BJGFGV7LpFb0DkRrw8wv3+r2sQ/0eSir+JbLY\nkzgq7l4M9T/bEaJI25j3rLHU6UvCj7eY1WBUVVpCiIpqLW/bem6Nv1Sr1oJk\ncRAaNesE8R7KeXhQgrVCQb19KaIU6RtWzSULqep8K0+TOAvJ5oYl7Lxp5rxH\nnFzvQc1gR5lvZ2m/DfbAjbMELpd+iCs8u8zvJhQZqC+2/OE0WgcTYgLFqaZg\nQ4Z8IKTpP4y3p9Ci+qh67qLNZIbJ/PM/GNm5JglFCg7iRi0E3NeUJiANqhVO\nLVygpnhd5RGaPKpxkAF1cRz+rL4BaB3kmIPv7IuYSqA/sDhWmlXL5bg54e5W\ndhmY/ApwimERu57vupQSg8sT92eM5rdzvjV4WyMPeTfLOTABBp9CNBWGNL1B\nEekGkjS5pTlHQwOID4GxdJJ85966hD8w/Ev8x9bWg2YIAbACVzfPjNGcJAOB\nMFTZhfczz3n7ACUK0xfM6Q5QQ74l7vMVLj3JOur+ibUAl2NSXlDobBcCG6w3\n0Tan\r\n=m+pZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4rzyD0iDzwUpm7vJ3rn2jwu/UgvKu9AMFrhJ2+JgQ+QIhAOkVeo2bRSrcR8V0lIqyL4GFlim2fdl7H8iaiOoIMnFu"}]},"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-fab_0.19.0-canary.3f99af40.0_1600989690814_0.8919429959279015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.72aa1129.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/fab":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-icon":"0.19.0-canary.72aa1129.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XUTyrU+rbb29rHe2uOfMj8mmFMyBHloUBh3LRftmIhebKedWEX7ElVdccpVg7+V3Uhn1w/XSwM+nGdg/5Jo5dQ==","shasum":"45d523864768c1ef48fef76450bed01587b5b1eb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.72aa1129.0.tgz","fileCount":16,"unpackedSize":68538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwNCRA9TVsSAnZWagAAqDMP/RL0/YoSaq2obr1Tv4mV\nkcEd4i8WBRulSY/Pxsn3l8WGvs9/F3pvEtiRyZS6PUQ15yN8977jjeC8AZE6\n165TFSdMVhEZ8CANWVgRtv901LGuBGa3HDtP5n1pbnTtGlo7Cj3vday3QYpN\nF7bGSh1GpOEstk5YiQQYYb6MYg5uoEHy1HChDDTipj4Hz8LpbIRicM6pktqE\nVlsQ0pa4QdUvRR6YsS9N6pR7L57qyk/NMsBfHfT6P2QjQvTaWVy3vIqEYKCx\n63Kiv3lLXgTA7EtagzdDr8pEXcTl+4tBYJa02dj2g3t0BjSmU30ikGjIYXza\nz1Ala1uXeQYs8PZ9ifWugwGXVCrK5byw26kQ/SVaa2sWs7Hy60q88qZdqd7s\naSDQ5EMfP5squqQABRo8gzB+/OSTan884Rzj/H4LIRzxnqAxg0fmTMPxs/mW\nXFs8y2HE+Ce+cAqKhhktAvV1OcluJrHlNV0N/V0lDbkFhRaI4gmjrTqq2Snt\nkZMXKytcH1a6GN3/eCITssEQN4odHabqpZ8pvJK/t6aP3eW9+oWqSEEcQHE+\n/+OkFR/B4ihTyNCuUYOYt4ClW5OceF4L70a65yD12ST3jV3nf6IMMJesL/iu\n+hyKJ6LI1La4uaTJvLKDKYDTafd3n4OphUVp9bU6A/fMf3Dxzfxhuzr8DaLs\nlDkT\r\n=Pw+E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEpf/05ziCIENUzj4H8nhMMkSM340VXZuggNVXAxEiaAIgckdUZ0U80jK7gvat3tIdIYWv05IAXM09GA/JI7IvI4E="}]},"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-fab_0.19.0-canary.72aa1129.0_1601068045316_0.4388107511415005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.394fd3f6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/fab":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-icon":"0.19.0-canary.394fd3f6.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Toqf4Pj8I2BIIEpsTXFMG210mTpMKQWzBTUTc8+Np0TWMwMRVDvKvjB7GbJ/r+02XlI6epNRnfq7oN7tXI2y8g==","shasum":"80b9b6415d62481fdcf9e1b1dcdb6c50e8be7f8e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.394fd3f6.0.tgz","fileCount":16,"unpackedSize":69268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9UCRA9TVsSAnZWagAAg9gP+wcmo5P6wKH6FRSG1WFb\nm/0nd6hSE6nGji9RwXLZB/fZORHGtJgwdrGsicltfkHBHnaTyxJzH9t9UO3S\nOADD7PmMmroOjmcMuwzWU8VqY9yEFW83NL2rSdswtm6XS/y+zIHGDCX2Ozlx\nN/e805FQ3OESHe39SKxddoOvslLsD1cjmuoP8eaBiw86OLyh6hyu79yej+0x\nMERztADRti3Mn79ElMKLznLiKze+viy2etEYpo8teDvjCG/JIVJv0MkWPIpG\n2iwJIFfPzwsuj9R59O2Xtc6HiJILZVZ2QuigH2eQqorAJY9FSILQT1llEKSK\naPF3GYBOdv0Twtnz+mKLIddAlCm5alNhpCA3HJ5nhXIzeWuNrdXoYlWljmpC\naznY1l0yfLVU+UKmqErbE/vrCPbSVwTVpMDHy06LjQ3fz4m/1Xv8SopD7vA+\nOpj9fqXpyD/LAM8fwosNPnNlLSh+a8Ui8BwnMPmuVFL8TWjJ4pMRychKJri6\npkv7xJt8auqCh0QG8XFY/aWoedsXpW0VxG9zz8BReHHi25UeOQpOKP2nhiT0\naGOOQDzfcZiEekPKEk52l4rIpiMK6ArgVZrr5k4CB94+gR8SQhRU6tdz8li7\nhnEnVIWul+EhQhZWIZsODO9T4+eyctqTHkA0cpXp9i3Wucc/SOUev8Xu3l/n\nhFg9\r\n=kqoQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDgIEZLb2g9KDcDYcvTaTa2Z5TOnl6ooMGa7HG/OA8M0AiADCADllPfBEay/Qb0yC5xcviK+so5Tqcl8ocWWpHt7yQ=="}]},"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-fab_0.19.0-canary.394fd3f6.0_1601302356224_0.5972912730025006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.347110f1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/fab":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-icon":"0.19.0-canary.347110f1.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-bPa6HycG15bUtOi/pleyOty2CwLeORbfIS8nWf1Pze9UmAbrTP4w+thMdQpksHLbn4y6Z/VsraT7LN9vC9W2cw==","shasum":"566ff4c98191f7e32946ebc8e3a57f435383b5ba","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.347110f1.0.tgz","fileCount":16,"unpackedSize":69268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRXCRA9TVsSAnZWagAAqLIP/0njVelRmbydnbv2DW7d\nSBBLFl0desWm8UYcFxa800dc1kMz3p55VCtPteBVbremsxUCBH6+OJPyZZPJ\nodNl6D3hXz6Mr9PIj2G4o8ze7uzBwp536MTQWBa/iMDbOfRTtkgR22Po/bye\nUM21rPf49Hi6bz9JxI+j1+HUJs0IbVATXs77zEjguZJD8D481i+Ji/QujEb3\nJ0P12dYb5cRoBgCcwUOk4uScT7n0Sg2HMoBNGiSJDmI0qAL21deI4DzD8e9/\nvxmWRmMfL5wfXw/Q0PR1Z5nQtVu2s/+npnXUqSvCaSORN9RE1n117RJ0EgFA\nVgxdpOS54gWH9A8hLf9m1EAWIvw5i9mN8P/TicX8Rxe2FRN8jTQS6gyMhreC\nkbmMLn/9sAlbXiGPQ6pCzkw6pwjtw3Fs+0ReDIRfV+fe2W/ljS/XWbvbknS0\na8GVJuiySJfhWiDiKHE9sOYv9ad+yvzCOSeDY9uxB8YU/0nr1vTguDzgUiMi\nYg3LFnZFFsJyGS8zbVQcQ3gFg0XTxp2h2S3AVTTG1zVFLkRLUBHFSI1HsYCJ\niZxr0OxGElcu7EOIWBRHyR8KAEw0D1GMVfaFMM5gvQOxUedXJ61z5zAJB6C/\ne2ESnFI2BjCzGDKlV5TmR66j6SUnWm4/cH38SqNoeFxiNurh0CdoxrOul36X\nNoht\r\n=xkt0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdHX9D5TfxLP7U/q8Olp5vE9N2MDyMyTsfi266JHuqVAiBD6SmC/1VSqxz78YF7ixxE7UzI9HljthyHJY6fa0XHZg=="}]},"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-fab_0.19.0-canary.347110f1.0_1601311831149_0.9915358030594679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.5e330bb9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/fab":"=8.0.0-canary.d4cd83a85.0","@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-icon":"0.19.0-canary.5e330bb9.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-E7FkhMc3dPHyOe2ebt9c2RCc1Kp1CFF8N21iiST87bY/ym9Fai6ChzlCHkvQl0v/LuYqFvpEjfzR1/pLoph8oA==","shasum":"fbb740164fb5a74730d9a9dfbe503380af7ab281","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.5e330bb9.0.tgz","fileCount":16,"unpackedSize":69268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQAwCRA9TVsSAnZWagAAyMwP/ihz7WfCDJEKHKAmzh/y\nFjeDDMshoUHZA3wihdxQs0WYBcsn2DNrGS1lJi6MzqJBqKf+A2wYKD81Ax98\nPcUXsANpRui8Pk3vxcdlPhnRRkRZvp3TIo5YCcXP6TkdERxjVbl5/HFaRJLb\nDM3rcxDkGAA1t23qL9CCcaTcWovhRZVi+9j04J9a5kNsNi2gRqlj0KetSwA4\nDm6s5Zfdi5vpERO3Li0mD1FICGxdDKexusMgSpFFz3A1WeothaxTpOKGBY/B\nC/R7E7z/W/1WXarGWPDBb7WA1KRN/V9DueuUSDOD6Xiviym7XMUxeIRqblur\n+YyUZ3quSYGmm2H/CNPRrIWwed+WhsP5f0i441qL2WinevTHqLD8ArWnP3VB\nz48/0Y0mcLhiWyiqPQB+r2sJogFPcX6pXpBCaHgKsS5y9lz2cbH7fbD08zin\n0Q25AIaMxI3Ro/q9q2e/A5OYXfuvH8wHIj4898ndMx46nqWnDk7uSKIyKNoT\nEFp2zxSdJ8XHjRsD0nnFxJVebWl2OuWKFa3/nGuNxbv6ImKb1+v5pov5wuBp\nB58z7dMmGOZnnAEhTBRpzxTomJfLA8cVO6SusL5u2EhFsvNQN475r77KK5rm\njDplDkmFLATSx5oKSNjouT0DzMFXfJxlLSXn4xuRf5H8Gq7fA1Mh32ZWf2lU\ni/iv\r\n=v6zi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBQoJ2vhlRKiT+rTW0JL7uz5ZmCkEWxl2DUo71Lw/mWAiA63xcvWb+4dwOO/WN/eCjSKlFr7aWtVAEE85nBAYsq8g=="}]},"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-fab_0.19.0-canary.5e330bb9.0_1601503279572_0.8760932919231872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.30b9e3a9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/fab":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-icon":"0.19.0-canary.30b9e3a9.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-1fqAH5+ADr9b8UB1fP50gE/JD562BABoQnsMa5gJ6sWbJ5cKn8ZLg65aYV5u4E1OjbV+xmgXnfo0jP8qTHceKg==","shasum":"f78786c10290dfeba14b874789233db27640c1e4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.30b9e3a9.0.tgz","fileCount":16,"unpackedSize":69268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjZCRA9TVsSAnZWagAAWsQP/3yGMlsrtCKrSHK88trY\n5INApIKYE7mGn2WvFMujWyoLltDa+hur3tlO4izDRlx6NPb//mRoCuDOTjsp\n0kM3iNzztJvsEbR/aSfwmAOgTq5XRgLzqSPf+1MuKZc7CDdapnFEf11mHBfG\nU65wX/208s3z36eqS0bwyvm+j1WbOEL7gkf0O5Pm7fR9V+0huEyb5TjrPzCi\nlmG1/baqB4qsqOxbHCIf98DjuxAiwrGswRe43FAiaOmKE9R3TZ0roFEv8vfm\ncbn3tKFVOmsbujIeLZ8bFMdn7s37jUNB4VSTZxTeRraO5IDvPzHJZEH7Oi4N\nAVmJUjRYN5MufKRouYGEMdmdjBUifIj1BmmbbzzDDgASrgjoOzDA4r/BO+Vu\nOmeWt8Z0GzURr7GIOZeaBFrpSZV670yGSTH+DF/GGrMFxWXSqmpB836spJ+k\njMZB5taCsRfK9Ld6dFVDTRTWhC5hYHTIWUZ1g3WjvyYaVZHfEQVsw6Nl8SGB\nc+HPc3hkE58SuPa/Sfgfr8d7Q3grM8RYMnYqe4uDID1CvMPmq9dxxhA77ZcP\nTpXmf91+5PIzWDDlRRAyW3wvJZfzNI9phLuUUvT6xOm9ZsdNpLCG2aFy/6r0\nqYN12VVYBbAXJb3y3gLL+uB87d/aVzID2RLd91+rqvqle5nXnyIYO58QLkK7\nElXY\r\n=epVH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0qBtzZBTep57q4Yn7Zvrhitok5/peC8jvrwa34YZ96AiBgeeEyaqOSb6mhwq8Nxzj65ZWSGNWFyTO/hKPJUhvCBg=="}]},"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-fab_0.19.0-canary.30b9e3a9.0_1601505497203_0.5320029782433584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.7bb04b9a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/fab":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-icon":"0.19.0-canary.7bb04b9a.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+ewarn5jiWPjfG0HkWo0WPknbOdkRgBKT32J+hoCPn3fihitlD/tcOKeR+9UDHyO+e02eFLPmTRYNoLApsssNQ==","shasum":"f8ce4a31a441056dc042e3a544d5253f62615cd7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.7bb04b9a.0.tgz","fileCount":16,"unpackedSize":69232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTZCRA9TVsSAnZWagAAx00P/32GlC4hb9wt3Eo0l8hq\nuybMLAuvF+g5O6JpykRBxEJvtmFMsHto4u7001yRew2EqXyW4LOkmhVMVikG\nM1J0/0uf2LNDMZ6IKaJf6kHdYqnvNot1vP78o6Pgsw0eVM8bw7dA7k8I7yee\nnh0YUkCnnuvFxw5KtSPfqQO9zr5nH5v8OUrCwz/zr9PPN1ELrY4Il+Q0sWGc\n1vYevTjPBpSXeF1TRNzDSaWWnLinJdvrGkjhVrzKp0aPdpX5pSR7nDio3+7F\nPU3JtCaFgRixgoesnECrcw1DZxNo43FDFRnPebkKvQV0GeFtF+gbI2dwzPhV\nyXVzWz7XAegLgAk+Fb6B98n0j64m5Gz1NfDZK06RIuvOHxujuTIHZptxp9z2\n121zO22mZLPCDA0vZMBWvUYjky5Qk4JL3N+q6F/BIeDupechnGTrx4yzqQUm\nHbYoONrsOkg1RG+Rw+tWecppMEeWQhgunY2ujYtk2nm9xnL8PNE+wHsJa06V\nRtRlFVVNztE1pm3fvPI8p/xLKp/R8nuJAI3Com6gfHWKXk6dgT/HURI2Wskd\nKApfkxHR7dyqnboaIp39pEZLpEtSygO/suCSN+3YFwE4ToSZ4svdS0w2JfWX\nB3Wa+315IAWEQjLCBNIAxjueMNApLcAEgHebFs2hlsLZ6Ut7EZumiCo7QdGL\nXMhq\r\n=eMgp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk2C63Zn9KE+VBl29Z8DhmloFQ8bPxHxEL21fGZpYB3wIgOoAkEWXXtzxrWpHHLxaQUoTQ+qJD3hefJgJy21gXj68="}]},"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-fab_0.19.0-canary.7bb04b9a.0_1601594585272_0.7479931934137631"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.615d861d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/fab":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-icon":"0.19.0-canary.615d861d.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+i/ToyEjsKT57KT1nVyt3AV3GvgSHB4gPedCxdfQOho7SdiPoyvh3s1oEJQqmUJj4y9OQ2mW+sj3t5BSemzFqg==","shasum":"6ec2ff86814bde11170bd115f7e3a5a6764e9ef4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.615d861d.0.tgz","fileCount":16,"unpackedSize":69232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNqCRA9TVsSAnZWagAA2UUP/3bfc2qcDIADBillD0/k\nMe9j6Ly6sUx8HtQ8Z0GheK7s+vzbJ7tro0I9nDwPTzA4XCWgXPCZlIa2PrvB\nPQC0t9Yc1VeLfq3BZx6/0ix64XOj/2S7kUUmp2++yUvoIxOtBOehIk/njY/y\nzM5tSk8kDAp+HhCI/ineONvixTOqW3sg0F+K4Ehcu9zbx+XRf6O8G/1+90kQ\n4Oqz9L0QbAL6t5N+E7QXWXrIE3j6SmN8dDT+8CyRrg6G2qdvzyQA03SCkC1v\nQTQOVG5DT3WrVY5+UMoO956VBR5+xdPl5FUIwQdw22kG8UctHnL/de6vc9uS\nBBVjrvwTJASagGtbAqU3bCVZhQjcwr5WVFF6WzfAnCje8UGhlTcDjFO4G+LB\nUBM6wAYkUsMFTuui2WZeuo/ecaoRfTJkrLzmBfgU+6Eqibt1cqURZj5KngyG\nvqKQ+4diiru9Tx4OnnlonM813LWutDdNXGO1VGkc7WHHw8e8tcxvC6n6AoVm\nD68L/iLyznXCJiLRuXiFGxcvrzAR+6x1ngJiRujtH8ymo0vqc/DP9zCIuq28\nKUZ25PfKlXleU4sTqJaStB7YSWKFQPrdY0i3abjAgawZC6aF58ZjWMr8ZYnq\npNFx/kAhv9IBucyggX85ovA8rYXDui1ZSaht4JuJuLIW+a5BUIyhR7LYlE/0\n/gDp\r\n=bjG8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIaLsR5zut+xdXoLip9sBVOHYBa45+M+HvBI3z40l2eAiEAr+ZXibjOmjHyDnuzp+3ple2gMGmie6N/xjvPgCXKLR8="}]},"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-fab_0.19.0-canary.615d861d.0_1601602410309_0.4588690663588517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.af110e86.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/fab":"=8.0.0-canary.38ef4501f.0","@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-icon":"0.19.0-canary.af110e86.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-MUK9UacXXOnogprWAAGN0Mr+MozASi1IELmWuCJnMyYYp34KvfOS55HPdrIcHIL9JopnxwSkMNDFQmLhrs60jQ==","shasum":"96cbe0fb6b9dc0fb2821a39a7a872222f80967b7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.af110e86.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yoCRA9TVsSAnZWagAABjEP/RUzzGNt19U3oI6p632g\np0ZX2n+gLOkGxwiXhLYNUt4A06KfGx9mbj0nhrmYTRMbln0BKx2PC/YIPgK/\nzLaSMRt4s4dWS9KIbAz3mFWkhdw9mQRr3NSIffsWLrrvjjCKs5uD25yZkG+j\nlzQoJH1OWLeP4tw0fISPO9+f++2rNQS/B0h2IeKD/ok754rMUEVtY3gjk7+b\nQtpobRNpDlb8Hb0jmfFimSTaxRzf6vvQwvezTquUqcEXuzLqvncObWxttJ8I\nvseIG7EISXhCsvGDzras2cFQz12EvtuTB5hhYhamkLJryHngOGgW43cCOvyC\n1KGT5yxsw+/5GtW+9kOHnWOuFgphWAoJGjBL5fn1I6FKwSHBjkbYPX7O4HGd\nqSjVJpVKtXfalSFvRHt9yZHqL8wUeL4Q1/SxzcjP4GnXTaPq+Wv/FF7sEcMR\nGysZ6EHKTLMfIx0QWZGDxW+tQAb4GhMGYZcYVS9qVWQ1K+QOC9nkmHyFmhmQ\nDSFKgJml7vtaJo0WPZb6eANzOiZgiVQECNmt+TTlYoXwSNiBB7vdRGcgnt34\nQ1Wv3dg8SJ6eSHbhK6H+xcWeryUMu6gyK3Mq2IMLjxve+nyuDeYEUblbUGTI\n30AGTHul1U9+96P+4h+vM9+nKUCev6thgyOxIP4NjpECiesS7jlMpIy1CxG5\n0InP\r\n=3oNb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvk1Ckp/3+6m4GCpi8Ia+JYJm2KPDnCRCs7b4X9mj+bAiEA3Rpbw7k8CEIBvzttgBjXIwwALX3NDgDKmRdHlb7nkoo="}]},"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-fab_0.19.0-canary.af110e86.0_1601682600358_0.959878978850861"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.89d27ca5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/fab":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-icon":"0.19.0-canary.89d27ca5.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-gDxpW89wyc0ASouJ4N+ldqvd3K7Fb+D7we2DxmqBCHy87papk6Rr5BHS9frcn98NAnsMaRHyfpNEx8Kq6RGb2A==","shasum":"70db653cb5826853825f3da70bd14e62de1c2f72","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.89d27ca5.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fyCRA9TVsSAnZWagAANqkQAI8y22VToa4ZL9j5Qet2\nxtBwvXb4B8NwJp1tFN7zm+e8UT6Rgr38KAvod1GJMtKWzVt4nsiR4VSiv/Ab\n5y3kvMo2PvqDqLDjIfO4ZL9dr12mF1AvhD+ZuAz7kCByza7F29LoA9CiQlov\nUvvG3L7evncGsF1o6EySv+qhU35HBiX6+A1FR27C2jD3tgDOojddMYS8H0DJ\nFMH4fVPS28nfDyylLHFPitikv+Y+NzHGITuXaCIqWTPFpDBsFEV6ZLzjOJnh\npS3oMFeO4Os3sCQcknl5Lh2UXd/wHPfmPiQV2ipkqVXdzFBIMa5SUNDtZyoV\nV+RqG7XWVgE5RgTtZAE9gHMRwqxuGrgRTngcDVUI9RZUd78aayA+UEJXmKCJ\ngZPll4G2jh2tryWNziliG1tlkrn3thYuyRjf+CkDr445zcpIFH8IfqkfxO4P\n8vcRk3WyEZpm67PTH7gI0IFrhuJbSL9HGsr85LBzWuTT7wWJiWWQDYo9Xf5A\nZLRCQwOwhO0IMnHenp6TmPtSKcFt9oJWLAwkYjSI7kY9636GoBb2LJpS7A6a\nPsCD6+Td6Id+7/Pv7//LZLCv0gIE5bUG5prEUOhdZRIkMpXdKGwtO4Zkld9p\nBajEnUAb3koRm80FYd0fwJtA3uEqN2pSzrDZUlFjOkhz20jUjoRX+TNfZUVh\n4pxL\r\n=dtAM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6TUOfrh+QqjaLv8o3V2U7biDp3PjI3yg71rrwBOcZmAiBPT2bRFktIrB8ilJiLMUaHebPm3Nj1iK7Fcx9FmPqjKA=="}]},"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-fab_0.19.0-canary.89d27ca5.0_1601947633550_0.5806080741259554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.9ef2e7c2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/fab":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-icon":"0.19.0-canary.9ef2e7c2.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LbVsK6dgHDSwkrBS6jvH06W0bSxxAcWOlbqcdaFUGiZa8TucsKx/QEoL5X4LlujSFQ1vvpfQ4Wd4iNS5IhoqsQ==","shasum":"4597a596d7d8fab813fa08693b054214f8d3ec7e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhlCRA9TVsSAnZWagAAlyYP/2n6/hIsgS0zHX3d1CZ+\nY+zjSm5GPdyaWq/26OhNsRjcLZbR2nicUgh9vzq3ibdnf79BJO1UwfBZlHu0\nWti2zNsB6KSGhtIMrUaRueuuP89mFm6T5dxWsl/Dm9FY8LmR4uzOzzKM/kv+\nXNEf0Lr4tNlOJjJ4Kjuerks/zie9jV8FyLsjwfU2e/+suofB+7KQb0P2rQRu\nYo61r8Y2BSIynE8Cj/0W22lBTbHcsmsV6qi0al+74ZkRvouNdgGQjK5Bup35\necL6ai0qMoFrQa5JVa1LZJLFToYmKBWVAxOEhy7Co/OkjkI411AhaTpbXC9s\nngijCyrcojzX4BLLT3kD/a2NhHH4ug67MeFJ0vUTHr4RT9f2J6Wrz8PH1CeK\ndCT7c8DT4VS4Fu1q+VrbtmhY96HR+8b1L8K2LNIyeNlYLzuifFXxDPRonz7I\nNUHxzkWDrpQHs8R0AqhuLmSUaqyRdntvhAo1j+JbkAALUI9gAQKZvlcs36y7\npDdJhPxb+lTFb7DNUl3HWmkK82qRK0M+f18TLKNVyq1V36/ies8EIhmtD6ze\n48rnyAn+XzEoaVDfg5jyPJkdJpTnaQMc77SItO7WslCIWUKVwg2eWSmLyd0R\nqcHlITagxFzIuBkwEyHiR08sVIuaArDM+sxfHRqhAhX+nx35o88S3nvibGPK\nhgpV\r\n=u9/v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWWiJW0vdFcfgL+OrJYJj7rv5m3KH2Kas6mhZZAaRvtAIhAPhta9j7N7t5YVVJw2LBL8m5SZddjd/ffDwLgQsUJv+j"}]},"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-fab_0.19.0-canary.9ef2e7c2.0_1602029669269_0.4138198659339791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-fab","version":"0.19.0-canary.96c8bdc1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/fab":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-icon":"0.19.0-canary.96c8bdc1.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-9jFXWTuy8W+ZMAGseFenmob0xzjDDd9XiNUMs4J8Q59zomPq//GWYCCBAFyt6xRsSbgWBsbUKpsQguqKujg9xg==","shasum":"359a4407bf8f18b73f4de1301d2b13e875e0ef56","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0-canary.96c8bdc1.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAWCRA9TVsSAnZWagAA4R8QAJKaEw4Uiseb/C6wkozP\n+hHWTa6cLk4dWMk781776fhibUU//NldcxiOk43wJCKgBuNLzx2Aj7qRePAp\nlMUqza/CPd96X5mxegN97fddkYank35jJVkQ5onByxekHeQW+ZZVKTWqTfmU\nAO1ooAOY/j6+BgAr4kR1b0DAf542YQiK0ul1vVwr66hzwEBCHAz+AXeNridT\nLQssRuBr9F8paGHn6JxCWRYP/ZmVoFLAFotJ53aYRRT7PG3GPaNUAT8P7CtZ\nKNU+8nktrs3hxy8hNvZtuuDVEG1YSxF1JGmvGcu8tx9+OSZ43/eOLySfyZYz\nbsBK2BzZUL5HZ/yHJihnTVJc/Q1YLu+Gpce+cgvzgWoMBtVa783JtHRlxHeI\nZT+id/Na0w4FOs1HaSn2xGfJ4xEb46B9vzS3+IyF6WBGjR715FTpsgIb77kF\nWX1Yy3abJ0ewR6qdm5xuvuxNnVU/Rzolpk8XWpCD0kDhByu7aXwKu2BqDCQl\nCnV0hpOjIFjbH/3Aw024+cMt7t+RNiHeYsZHJ8zztGNFHiBSPME9VzgeWTEh\nLc+UwQqi6HyH2ZpQ3TM6cnawEJ+uUKAhuTcuglIVDbO2J62s7kTmQ3BD5oFl\nSkLwbDMUKLKEp2dT9ZdKrVoaaK14SPOyNj9SPpnOROcrC+T1WTKLVRjZFVbA\n4DY7\r\n=361Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEGLTSuS0oKvMTx+tB4UtXMEZTjUA9nwcT5g8MELk46CAiAPvUJaB8DKFWWFsX42nRdgt2EOVn+xtVU4Oq7QKbgiRw=="}]},"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-fab_0.19.0-canary.96c8bdc1.0_1602101270311_0.3260237436806035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.6c21f034.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/fab":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-icon":"0.20.0-canary.6c21f034.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fkDiwkU77Qz/XSiMDy6jLomj05JlL1GRIWLl/eRD8PolkLgLFfw45B23DichvouXOoHbBEotzIvAvhAWPLCusw==","shasum":"bdc473f27acd8f11827e742896ad3a5e0dda8aa1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.6c21f034.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGNCRA9TVsSAnZWagAANi0QAJkgP0OdEB7JJtDfs/2I\nIisD2JuNREetsCl12Rxqd+/l237urP44C8eMJpwciZQOBGNnCCWTRgJ5fHRo\ncxyTkbeK7R7IXu7PTQuGRCPW0uGn0gTGDwxAtE5FqWtdDnCT4bS/7woJe4iM\n1TapRXGjvvqWcIPK1p8pXdSW8LOQXtLZMZKOEWiiVB66yE5sH6OjAlSpB0Ng\n3y38ILGNlnV5YTWkrQQl9zRYGPwZKcedPQx/hGt1B9mDb6UlkDN0dw7k2OZq\n4eFucaKaU4mdAFokBPDONzhx6F9PQUQd6MX7HAuLxJSqdisOPxGAg/YJJIu8\nPbs2iLz3noTK2n/IBqaFMMpIzx2kYna0sbG/9pEHJIVRh68FPfN0tNWB75yK\nCk2GB27/GD7ceEEnInjt5V7WRhkp1BaUXVPR7KAlX1GVAqTt6jPNa7wjUkur\n2bDe83E+w8rf76UaQuFLuBNbnmUJ1EJ6b7vHTRSO/5/bHS1JtQLLittePXku\n1UcM1SVuDYnCg264k4bpS0cZ4CjVWvJJS06Pi16F6cBJoj6Lba8UytRGlGHU\nZgFCTn31THAiyE+A97V13l5+M1W+ELj/LUuWgkmQpJrJs/VeLqnklB8+T8C6\nYanjdradUvq3GsbHhlm6V9D61WqPFvhwUjscRzPzv7wpuRl7e11roQLjqRJ/\n4Jpd\r\n=e5AA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfbzTXt1O9rE6kmT/rT9hP+oIRjmtyPRNo1wz08eYDlAiEA0ekmonq0BJ+pKm9tAkCKcof2b2xkhDVRlo77r1rDQ7U="}]},"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-fab_0.20.0-canary.6c21f034.0_1602109836590_0.3242867732771253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-fab","version":"0.19.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.19.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/fab":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.0","@material/mwc-icon":"^0.19.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-fab@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-NHw+wzxcFHbvP0Ryt65pIBPIIKJCM6rtQNAJwTvOUEAOQtjY/VHZtys7EN/y4H1jMjcTrqgjBmi4zkhOhjuqxQ==","shasum":"55781ad3aa69c4d2ea3bf9f8a288668b5385d264","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.0.tgz","fileCount":16,"unpackedSize":69316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIxCRA9TVsSAnZWagAALs0P/i+31JQP54CWAcJnZXIM\nneZrjSQWB8KpRWEFEV1F+vxpQCulnErNpZQfkvBYTuqtNCOoZhl2s5pH4T/g\nPVHsXoGKxPa9K0qx19olRe9BcpUO3JuYAdtB8aT4yQ9yU2dBTJXY+GimJ3Dk\n+sqeZixbrec/SCYWqn6Nzefdjl+h8njuMqkUKa2v6ukpLeyJ8M7unWLC6vaC\nzZZWunyVvUguuZegd+gfwRRu+G+JiZE1g4D4JDXXXtTkPVFkuFPQgn11keSG\nIi8Dgc1RFH7v5enzyOlYVc/ZG5PSxxbwgIbaDn/Y936TBj+NV99+XANUJfjC\nvZCFnIuATEPw/UtsiwRPcM4dPV9PJxgcsw6K4Emm1oVMxQijKpXDCCQ5/Zo8\n+/QaxHqI7GYWSmwwz7qTooCRuJkXUyV9PNMaO8m5P5HtDrC13SsuBp+/T+c6\n7VdMazsyOhNerZwncJlbpLhyh/cPTC9Zv3lcWFo8IrbDbz/ErsvcsRtxr718\n09zsg09rhVapNXh3FuGrrpWENbGnpYMbzI5SLR6z/X6qvt8RSTOn+D4qKo7V\nn11PpW8PkEd+hWnDnh5oBV+fjbh32alFKY5/nye1mJFc7ZHiny65EX2h5qqM\nBNU12E0GC8kUnDRf+0H4fWyTyl384m4KdBU8AlCNKqgmKCvp2mvnqDy4tX3/\nACFR\r\n=H9LI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdqAf67ongYqikuBDEKo0tOgzjva2Ti3XIw5r8BCTWcAIgeDsou7vzeKz0zLRfvsyNr72eGFrNFnogGHLTnyg+5LU="}]},"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-fab_0.19.0_1602110001472_0.4754779439567678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.1f026aaa.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/fab":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-icon":"0.20.0-canary.1f026aaa.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fH4cqvvVtyiWFGEnhBzGM+NAaWSPU6D8vLKWHfwJdHJPkTpbHmhbw9qvV5XDAtCC7GHnFrILoFG5wAVKaqWVUw==","shasum":"3bfeea4886ae15bc6d21b0da0358f99abc02a197","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.1f026aaa.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5h8CRA9TVsSAnZWagAAV3oP/37p/Fq+SvJuU1ZjPOp4\nve3IhT4WaVgYq8xONyTN5QSiRiLsAhoCfagfmJJqhuxXgT7UssbHBX+iapOf\nVuf52OXsrl+/1k6lg3mnFcj9M7uvEJankDX3NAMcl7w+Q7M4wBgtcutZUE9B\n+5tmp7Gj2781FZutienkw0x/5IpTI08su5o52L+sTm408omsFIr8oEEnQQKU\nLA/EpRwSvKtddAwFTl/k8UlPRn5l6138lc+qWAkI3PUdyx2+iLMz/v6LzRHd\nBkeXT3BfUjiOZSE7+nqQiGcFuePpXQXpAFJYuxWWKeXEB9PXGXk5HVkPpo2m\ny5kCdnat322yDXIjMw8EVWZrrDMUKbYsNYiD+vjau2KlwF685ORBhJhjftHT\nigvM6COT3ZAHJ8J+Mr/WW/QMUntNueSKnvPM3ngWCul+tPm5t28EBBSflEoF\nzOLdfj2SCT7rzdMq92TExpT5eBQtNQWZywOMmAW/IMK9vijTSXUbTujJQj0i\n9mb5iLaLt7OKfvNsT4kF7jXTP1QS/md2PZk6Hh0IHersyQKxa24HRWA+Mrkp\n1QJV2G7N1DJ1WvNe7J+hkWXa68F7NQ4Dvbjc5XBFzyV4JvnxKRFfuFRDFC1T\nbrXSUnAtQx7CXWjC80ZgnrY1tgVzjisARlv0elAjrrnG+0/dC4GzqvTQoeoe\n6XhF\r\n=3Cw5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4ZWUU1b7+APzpbG7Fhk07/VVVyWDxOdwLCpnafxzyIgIhAM3Y0PeiKrTqAN9FwD6XnuiT0qBqVBEoEXBOuBYVd2nB"}]},"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-fab_0.20.0-canary.1f026aaa.0_1602197628364_0.520741842351452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-fab","version":"0.19.1","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.19.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/fab":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"^0.19.1","@material/mwc-icon":"^0.19.1","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-fab@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-bgw58dnKZkUUTzTSSzoq8/KbJiXcIoV2qS5Y2L0U/dUONcEyoTOnVATS9cbaHF4Nv+kEVhWH7Zh+pm5e0pjyCw==","shasum":"d0e9f624e9595eae0c71023516bd12e7487ca678","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.19.1.tgz","fileCount":16,"unpackedSize":69316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tQCRA9TVsSAnZWagAAIpoP/Rda58n/Co6TiZA5U83y\nC9UMNKrPElYjhqXgn7K/LUJmFQaomp6E76lhfI4wWJLkB8+l5MlbbhUmaPyg\nWtlcjmNj402j0ehZ7piCSkDQ1ZZMIQxk1WbGoAA3E2rk44Vo5tjeCi2KXGhO\nZyQRJbAKXcabRJx2yj9yEc03LqkTM7VJFsQO1Xc/3N1wN1aoL+E/s1CdTvm7\nKWytulAxmoBtDV8p3xUI5cmQ0u2GoiXwnymBzGayejFJJiEL9/veXWi/XUs+\ngd7j04mblIu85Uj3eibmarPwfB4kjZDBwwmo7vfK6ef7GB6yAjjAmn4NXvOH\nMRjuDzn3YjeMvzXY8VerdSI0KH6AvKXnPEBsnL1/x2fGFrgZu0D0dCvN83Fj\nlOh3Yh9HJAMxZV23DCee63OkcAQlxt5aWyio29pmzK2DtJM+4otFOE/VG9w6\n+edUrtkxvj00dND/Z/Ak+nvSj45a1qyZ66AL5KOwFahSgHaC/z7QcJDYw2qh\nVUa8K4XNkgbkIZxuIGvIKXmzlJZNrKRNdIkL6hUH7fswc+Yf28y/PlbBdrUg\nFO19aPOOEYQ/f9LWQuRsZWdl7C6Z6BmxnmQ43eSGtQyRDfwlnhq38NUUZJct\nCeqy45snaZQOHKaY5eJSdgSMQ6UKS8LP1evKLga4vEmfJHm/aOWTcjgDgIIj\nGqqd\r\n=2XaS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEtZZPIp/Om/FOXlNG1O3SoSZmW+CBuxJHcGkZOWGSHwIhAIM3yjNV5EvBdX4256Quh7gZwCPjubJZa1RrM2JoSeSk"}]},"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-fab_0.19.1_1602198352415_0.4460802531661061"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.5f6894b1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/fab":"=8.0.0-canary.774dcfc8e.0","@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-icon":"0.20.0-canary.5f6894b1.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YuEk9EZJ0aQAZAa3WrHYLO54yMEMmvgQ5ZGTjmzCEtT4gBVETBpgk4z9Eb1RUp811y+bOPIPjpu/Vlsyh/EkfA==","shasum":"fcf2b4203a4f7cc5eb5ebf3bc16678558a0b25b1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.5f6894b1.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5ujCRA9TVsSAnZWagAASr4P/RRx22QKQVYP3hhHK+dX\no5sEQw0FeAaBhOSf5dV2oQZpq2TBUinPc+HFycT8knZbgS2dYHFoxabcmEDf\njeXXU9/hEfhc62Bqg4Yg5oBm5k8gVzp4Dd9PX3tzac3fqwqMxkSkV7l1NTXq\nawvqNjCRBFt9y3pIGStI35E8ZNDEKF3WrfDofpRFEasBSK8hGizr4On7K2bm\n73XGlmpVez/Zd9k6r/Q5JAIiZ3ysefg8btGpbQanZI4NqdG1Uy50LEjBK4T5\n2UcWU/tOyBeZh5hnHRWAZiKxAYRZ7bE9XBehYVpXFIBqEOwweMcg2EKeum7B\nB73J/vi7TCIa+ZYjLZAc5Dd3redjfIzPitAUgnYw7n0msxw7xvl2MmWa3673\nTvIzTOSj3vK4MVipmZZU/lAwno/abpcSGAFqucQ3xrk35nysBWoLYMLtlvlF\npW43/49KO6HY25nmeCmAXLgFHm9kLP7KIViD8Vt6JJLk6BV0qAQokvxDtFsM\n06bodpvFpHeTnqrPTj/F3llvA3x5x3PyCYYcTA2KPbtqRYiOq/04rLj5joR2\nwT/qcVZsZLDCNRnoOJKbDjMLLE+NnJ3I8n0/gHYevQKiZ90MgmlOyjfpjbsU\nJYWIrkl2VUM6p+Wt25HKrf5yYoJJ3FTaOdmjcx7X81ZT2bDPIlWpk3V9SSYc\nGeO3\r\n=4/ra\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4ELkKTaagjuofc4qkRrXdz43Nj7FgEIaUaLFrmTL4NAIhAM6U6gT1C7yo4UKFec+DIYezXSSQIK59ZCGbJHWQs58C"}]},"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-fab_0.20.0-canary.5f6894b1.0_1602198434873_0.33363657677313396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.f6260d06.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.8a39352c8.0","@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/fab":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-icon":"0.20.0-canary.f6260d06.0","@material/ripple":"=8.0.0-canary.8a39352c8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-2f/1ABi3EOYzlbh2WcI5kEgrGlWYpsVRdhrKFA5s3SG7u3vYibKBg19lfncGm5HCAr9byhlUjaS7zqgsuU7vFQ==","shasum":"32f3b9623f30c6cb7536222d9a14aa4aa846ad74","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.f6260d06.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnxCRA9TVsSAnZWagAAMD0QAIP3OZZbDwCZ1dCDHXsi\nHaJtYtyyLczXwwhCgxk0HjUEnX+2+korXiJpEcWhGKposjdRMSHT319TpOED\n7e7p5f9n0rwFOxJLWva5hrv1LqYdrgYUaUAZEHx7RpnHxh7h0srUx+MrjV+4\nU8dSA6a1Qk4Q+sek7uqMCr1nXiSM7lEFaxtdDuYp2ih7Y7vb+l4shr2wbbNr\n+6c/QfZ8gTHjHS/J9EslvCmfxQc/KtT345K4cr7dcOv5n+o/5cAa32wJ9x6T\nEHV+h994p+dd2bR2AziSxEzaBMn1fmDajr7mkeCDsUmDQtMxDYM+tGbGdr33\nLTHhJI8vWtwIXV8VZ+wXF5m+csgNCmoFc1wZBJzDO4AbOvAWeIxeCPiwdCIZ\nDhY9UCuiffmgUR2G3VyI9pQcX1oziOGPUWjn0+xjybJjaH1iBBKXYNm4q/8/\ndxF0ELkQ19aqSfqeoJhkF8jmU7/MJCdE2xbVYD9HNEiJCEsfQ2uafZvkhxCJ\ntO17dH98F8vQYOkIjl9uQZujIiTw0A/L8rv3vwddC2RL92tJ3m1gvyveTJd7\nkKTmSMr4VQHB/xac23bZJA02beL1seEaX6Cid5C+6jHgk8qRFZDd6dwbtDem\nFG65QZoO33+w6aaf/f5MCkgufpUTBX5gKG+YeDfpnGz87NlZa7hea75kjlO2\nOKSM\r\n=biJn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGm4e34wWOFi1vU3B5oe7+2co4sEbOb2JYnuYIa3OHVKAiEA5abMlA0SOnN/JAqyu3fO/VjPEfPzz8hyzke95rL2OAA="}]},"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-fab_0.20.0-canary.f6260d06.0_1602542064698_0.400979900273704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.2d1b08aa.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.8a39352c8.0","@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/fab":"=8.0.0-canary.8a39352c8.0","@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-icon":"0.20.0-canary.2d1b08aa.0","@material/ripple":"=8.0.0-canary.8a39352c8.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nulDqYb34ty65gFPoBV1UUTW/BibJklXPchqT7n6qQYXXm1SMsPqb/XWY5kxkmYqmEK7SzNF22QL9qPgeq/G/g==","shasum":"510d1625e1018291d450502d3e1d733cb3fd7241","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.2d1b08aa.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5qCRA9TVsSAnZWagAAxE0P/0ue39LWM5QpETSQjINl\ng/Qw/Mmx7eB1XBPfrLunG2qldVKZYVjfDSG1CWGMtp8mwMPgCHjbA/7XqJXP\nwni2pKcU6DfisN89liGrgQ1K92S0Nott9MFzlJD0HAi6KVw6mG1jyFgvfUXe\nsckLhQ8XozIm9xxu2nrkdFJIjMkuMcN0f+Knxb+RIIFmph5XFUfwBKKTWkkN\nUNpkMQa2DiVgMQn33Fd3EkKEDZZh+Bj57osJBfC/Dza0Mjqi67kvzZkRpPU/\n3u+axCb2nrFrjPHvLS4sHbyL+eh+oP7ri8AnGwYgdb/WR0ghuQ7OR4irefQu\niQn+q15D7iNj7u/EMA4gSiiJg+3n6HjRaOg4EmrXSbPVIbL6+rX93AnWV+JI\nAwXIE7LS5UxxV5iAEkBGAN+0SO2T0sRgNmqNmlZV2l6fPJjdgQY1hazBjdSn\nSqgblJMOJcc/IHyBapcqhXTewlyjRVTZ6WxFnrcqEb+7aonE83Tbz48AqmES\nCs8BttqCvE2SV94efp5TqpGykbhwInjYJMCICcDRLadScsPUQl1iG3Kbhyre\n51jZ+sFIIG3xpKfNCskqHSHF5Vk2J0BvGRB0gUxh1OqPshb2NWNEQGC8z32L\nGCxKwv2J8Qm1rYsGEAj8h91LN44f9gJjlywccxQIZ5RtIj5UxUcbGUbywvze\nxVKq\r\n=TbaM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIARkYLddD+K9zgKIdfzh+6DfkrryezRmYPC+4yR8ymbVAiBXv1GuBxTRITUWg2KhkyHNaapFZeZcHsOunUmg9P1omg=="}]},"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-fab_0.20.0-canary.2d1b08aa.0_1602616938101_0.7191461084616546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.5bd58844.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.790ca85fd.0","@material/elevation":"=8.0.0-canary.790ca85fd.0","@material/fab":"=8.0.0-canary.790ca85fd.0","@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-icon":"0.20.0-canary.5bd58844.0","@material/ripple":"=8.0.0-canary.790ca85fd.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vUw+6CJcxHJBRwyqLmoK2UvH/NuuO3blM6zrAwKTR/z35PJ2AEagzSwYpADZBxAtxd27ekZzuppfFeqZgvB5CQ==","shasum":"c0edff58e9a09ee3f90747bdc7e97b65f0513178","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.5bd58844.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxSCRA9TVsSAnZWagAA7RAP/jKmFYBtOeBw0dSHF9A7\nV0ZrjtX7HE9CnaMKi7csTeJoAmgL9xZFcl3SBJthYThd96WGTqC6eiEL7br0\nl7yltpwZ/YlfbBt49JzMt1Hra7DSOrYzMNsycyspjfEb70iKLpVEPPpe1EWV\nGjT59bdgaiUur4eA39x8j2CLy/ITpliUMiS0a5ubPF/04q66vXr68LAO/Aae\npx1icuqlOCv71Alxej2Np0kJ7TYtd59M9WCSAJx9+VBbzL+r6gdpAm4DPdZh\nRnmWGBkqQ/lvC4Gd0D19KJVUMl9WlGnAXFBBj4mg73WA/G3d0uS4mQRaYaYD\nVmoWg/N07PI9l/pUK+XWzULWjVLPmb/HuxkmlkmjU77J/6EbJwidE6Wrq1mD\nHqZvV3qwUabtVcHXzJ/6R0gCXmvuiVCH9V1tx0aGmbHsWCPNoewKC36uFkb8\nrCLB+ASI5Xtm25ZJ1BdBwBsrUICVN2jvHQe6Z3J1j7ViFeo9KfKdJSeKrWVV\nAJVBPaDZwIcPpOc/yXV+L2xGRvGKD43JkXYoCfGANZETSDXs3pc/1Nq/QAco\naUcRtR6WSsnh9aOQvy13gg6OrihIpZ5IuBECLCdnjNJGtcjaXik3nePwEUXF\nduaMwPFK6j4oddso+E/3ZH/MyFVChDFrXO1q7KvRunizKDnP7N0Woc50Wurs\nHxMT\r\n=b7SC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk+DblDf0N7YLomEZg47rYmieUx478zo3Gz3qypZ082gIgbxJrSIKigpDxTK96f/dYA6GiBpKRHUDtHVjGTCu+D50="}]},"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-fab_0.20.0-canary.5bd58844.0_1602632785544_0.22192028478348247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.bc846b29.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/fab":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-icon":"0.20.0-canary.bc846b29.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-gdqGQG4x8ydLAz5rvPIcTZ9KVi0rjgzv/bUgSfX5opiconlcsmURWWxBbOqqqwOlOXAhtjSW/4Q+2tUoanov7w==","shasum":"476ef6e216ccea4c792e2fc425c7495c26f28061","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.bc846b29.0.tgz","fileCount":16,"unpackedSize":69385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BdCRA9TVsSAnZWagAAZ2EP/0KAfKIWoiTVahb4xsWQ\n5IYoMV73oS15GRz4TtzknXKg/xwRjVVgiZ+JzoNKur6mt/hY8K9/WbLEZtmb\nGnkuF9dJRW4GBov8C5aIDu6Z5rNfYOKMByxEQDM0XjzzFeGd70Yz4JZPvD1G\nbRyHLiAKcJj1jG8bk8r0bVVjWgFI1vzWadzldvjgYeLF1eio4nQEfVtPLPCl\n5kPlliw9ZA4oBlOew4ssibBCAnKm631jyq2BIv8hJutNw0cFUM2KTiIJV/Ig\nmoDvxLktj2rT+O6tkQ1f839mVgWFddcEA4BVpaHhm613G4PrZi5YzbshR8WW\nBrYCYyzMJ80GUvLfg138Y7TFR16Z4DcfQMz6TcakdjhwALgpeu2vHidNNbQ2\ngQA6ZX2pATj79tsJlq9Df2p991vYcMmOTkqtZttAvQ4FvVSjTnR0GCMdfucd\nmIkpUyoujprmMAsojXaUsJz4uhSvRa8OmxTCxMIIXjhSM1OwT6SkLwHW7tu/\n/bur3CXhv+3BGY/t5XZ0AfgrMkQXmsn3AJxSqFdmidpy2rIt8IYa3M8qk4S5\nPTJsqSSTFqD+90xR8BS0ON9NIWnbIgC0FOaJOMq0Q8IeUf7GNniKT97RsmuD\nOGrMtV+fzIipEXz9GYOeNKGcxJMPdnBC11XbIEtEietOZwQCuEmyMHeoDFoj\ndIgb\r\n=9oH2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZyQDNh9FTvsKaaDku4X9wkYoLHC67TC7QFJwkm0FV/wIhAK4Iac4CBnmHGAyvEEnSZpReNoXI/3yIDIJlBWhwxmCE"}]},"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-fab_0.20.0-canary.bc846b29.0_1602699357078_0.13698556603573597"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.3280b686.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/fab":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-icon":"0.20.0-canary.3280b686.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Xv7iiL+s+8mZFMZd/PC/vFCMmIMbzhGP64yGlahQD8GkVTWcyrNZgHHep5hz/WLQ56Kn5gyIwg3bpto6KBfieg==","shasum":"b57f933b13e204c7a4bfe095f659aca3538104ca","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.3280b686.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOUCRA9TVsSAnZWagAAeyQP/iIm73nC2pj49bxbR5v3\n/p51C/ygD69at83GAzTy2Pgw63saRoW63X1YgINPQwYw+ZlQEWpvWUsCOvt6\ngzSfts/TXQvmfO3+bnuDD6CLK+LX/7eS/eO3iLZR+gV9PBQlrI5UEnjT5pXp\nPDuQz3cN+rLzsgHuLaIXCOKBRJlg2vb/nnfmHUNiGXCDgDSqcsOS8iaCvRgA\nKy08vzwdS3qXiGn6yr4wV6Z83Eal6PAt5SkRS5mZT/AdWYJRBn3keZnkuHuz\nDB5y7ez53JYqXhSR1gEzmgvib7jJqPs68k8jVLEjmIrftUujoTWaRqhp8ovY\n2KvHPRKfNbGOahizNcbtFZx/whF1p129i5bw/A1Dr59MndPh+qaSWxCI3v28\n2cC20XJ3CMp6DFR0PtDnRDC/aENqEdrFLyvRP2DBwVKWQtx9Gboxr6Pu2RAC\nLvQIbOxuEP1IyoPo80K/RC3QtkbI58Rmbwtg+FNMcIk5ID3bWgdZeWTGN4ZZ\nWbnGVD2XxlH/GxWEeqpjWI51XgvDUsUOhMS2SxRCkDXXgRR65/AP49sOsB7W\nbnryTFr8i2FlTNlMzKju4B/IsultN6lWrsU+lMGqylgq+P3wR7HWIgMbs/vn\nZh7ROhCcRB94GmWn04JXbZYtQrtYxkxUPwMveKNXgBagTg0H3D5uhWM3GDTL\nf+1u\r\n=TFtV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEffxK/4u5MZNqTpgPrWSFDjmsG8yaLUCNZmzdFi8d9FAiBiQRNH5GMUeCS9cgHlraFPC0exbY4f/f9mwDcsLIJjuA=="}]},"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-fab_0.20.0-canary.3280b686.0_1602806675538_0.8069567710232615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.9e94cd38.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/fab":"=8.0.0-canary.c71ebfa02.0","@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-icon":"0.20.0-canary.9e94cd38.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Y1G2hjftkotJ/ufEZRPPjCxH9vVtSoyFa6T2BBxhYJgCMhJFYQNvnTnjI8K4PrMPrqhjlsg/kajsyI+TT3W8RA==","shasum":"fbfcfa776247e097ece06cfc484455dd9249a79c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.9e94cd38.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig05CRA9TVsSAnZWagAAeuwP/3Sjh0GRdbyFpI4MC9oE\nnNoWfwofp3Nmh+WFJj5ERWlxSR+Pnbg6FgPr4tMLt9ytk1X4F8W5gEd6mO+/\nuEmEI/W/7LZV/o0TxdU0rVJteNCXqniljNf1OgguTZRCyYydUCusdcqPgCR5\n8FMHzpgfV7ao+hMrS5X4Euw/UU8IYElp57t3OML1alUqSsGniBM17uYB4XZC\ncmbV5+C8TGWOwaSOLB8hTRRn4qAe+/QXgQr8WFTdZJ0BuqX3Pz8IZNCSsHj1\nnHZ0PXzDvqHQlyNv6odjANJ9NOwjFiU/dBkn6G7uKavUpFBxIG1Pbhv6Qxt4\n5Xe1jGL2CyAFtFa3OjBM8mw6J9q1ESjJOglAgyb2LdIa+Wt+9WMpdhfeMmAN\nIyqmXJuDJ1bjxfvLZJowdIzVMEuazpaKKy3iRbt5S3/gQrBHDs4m2IRCiNAj\n+mq9XKNrq+uAwOgm85KvmzwzQEZsulFn7HKG2HDfylL/BEgSFp5VEMQydD59\nl/icHIalIL7GTga7VYpR/2NV3DEQ9HFCDcvesk/e5vSg8o+455QkbGeGRprk\nhEt5PL8e91j0YrmZ84GrgtOJTq8uGj95O3CUXsLnh2QWa85gyAxJW5bAXCFB\nuKJeHD0MBpbhyvTzXNkOgSPvho8zCIf/V+/2q4/xSgnHjxTP6PBRaB5P7x1u\nBBGa\r\n=F9UG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKUrXBNJVof898mogQs63qETmoL083IE4FRwABoRKRkAiAZC0WdKksZeZ3JHY8ggVQo8fY7xbWXYnDlOwF7yw8Qzw=="}]},"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-fab_0.20.0-canary.9e94cd38.0_1602882872534_0.3596479358574327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.4773c773.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.2ab716cbd.0","@material/elevation":"=8.0.0-canary.2ab716cbd.0","@material/fab":"=8.0.0-canary.2ab716cbd.0","@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-icon":"0.20.0-canary.4773c773.0","@material/ripple":"=8.0.0-canary.2ab716cbd.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-71QOLYkV1adyvPw5R4WYloJ9aA1DltAdfZ1eBu50i/FtS5M1Rshq1pkiFZa3/hI+K06Yvt74uMxJ3GkywNVneA==","shasum":"f467465c3e13d513f3fe430b74db8001f5a8b79e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.4773c773.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/sCRA9TVsSAnZWagAA/fgQAJvmd+kOrCNaYL8YunI0\nXhvnYDjAnOA0JY4J4yU3ko4rIRH9UJ8lQHjJf2S38Jjk9sxgb9qxvhtF9MvB\n2X7pZvsKh8mgfi8GOQURMp6NiaBB6F7779dS8s0/3gxHSgdx6n2fMkMqay0k\nTtH2Bdmd61IzTfbWuUab6AQHmcvyNDJxrKBt0/X1RThM532qAmlSwlucMuYz\nDPvlDWT4aliK/8K5YTncrd7pinCLzAk0boPZm0YfQD2s52XAIVnyqJAhzOhQ\nI7UBZrCq1DNvdiSn1gylkLUJExY0hd6bVBOzHDALGJen/xc9mXiczgedQouy\n3ZijHtHmnFHEE3qqsUV+EjJq4kC9t5OYc430emOqq6BuYgUijdp6uLBa4g7O\nO9e90NiYzasig/1vOngfVphEMbhAb/LMDW+o5S1MdqVG5plUMO1ogPcVGRDA\nbtRPsHID/iZ65OOiTgFteJYKFfKUknlOJ1Kj8EESgoMAkptVTKvr9xeCxYed\nM/fsqjElKwqCdQEQdia+MQB32ZFhdTOJLs09VE2w/Q6uYTfPHSmCz8b+Dw51\nrkTAXF1Zg3Qxg86txyRXjH6F+4hguV1CXi0N+hx8DpWgmVadbnnf29sF9bTe\nOxgGkPZUYgwSNN7sls+n8U8o+y9pqeMcHV/8M1y5umWR246jUu5GJxt6gKq+\nc4ay\r\n=Re3k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDM2keZra5Yf9SGLWm3GFPgl0ijnfKazJIQm5I7oqGJegIgI3H5Q0+tsoc7myLzKoPSjjFjDgQ6tq8kozZErIYDdBM="}]},"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-fab_0.20.0-canary.4773c773.0_1602887659444_0.9100532931103826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.65787913.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/fab":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-icon":"0.20.0-canary.65787913.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-9jpQKXX7IY5rcuTq4tfzxej81tN/Jprmej5uHNMfwevBqFGWZ2Z07L7WtC+ZVfm637sC3hxgH8SAtpn4mfy+9w==","shasum":"6aa772bcdd49f85ee3ab891a5e3029e288aadeae","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.65787913.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAcCRA9TVsSAnZWagAAYfIQAJlR8eilN9uVEVedhACc\nBUO/YccsuADwCG+4ttA9esGR19AQiTXR9sHMiA9f8IpJ62T6lrvBVWDam4jG\n1EW41Wno70uyI+ko1yOl+UdygAMQZQRIW+RQEe98fa0lPf3IQdhTXr++EHOQ\nPm3Obx/05YQO8G58wFeR9kNBMdmVEfxpT3nf/gMxh4I55sQ5YFbh5MsC0LUg\nuUE68A/Ga9hC/57A+HpwHuGrpHcPRIWuxDdPNOHeJzSEYe33Fu3ihM4w2pbz\nqi8CiAV7QmHIiZ31e2Fzv7RJH72Qaj50LqW8O67gfFTmRUmSMH5E3tLgJ6Ka\nWAUSckF6dePEkCORcEzMYNieZmBZx0X3fg+YMWjCGk2o6P7OvXC3uCy0cbMS\n/xG9GpV/FOhGgGJjev51QFpD87s03OQMvBIkN42/pqmh0N7GrbU/vfj3JxUd\ntrvrg+diheiQzYkQRSic7hpfvpOHSCxx8T621++RVyJJY038tXpDuSUpT5b0\nuj/uF5x2S8b3ILhbYWRjAoH6+4yKvRqnmjIkI3P18rXlcTyZVYe/HuWBEWSE\nrkyY5gGIMBRsH51jwRYJaGgvwSX55Al42SUuwlnXbx6DZqtJz0DGS4rwCmom\nliV1m80R2vBUNsOC7qbi9lyTDjgzPuUGrtR73kS48+FU8HMETiu27QWdnRUi\n2vRM\r\n=XQQB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3Mzh3Vr6vkkJxTI1iRfo/uRVm0YDDMqAnFFVDs4CGJgIhAOaooqDL733xyBoM2MjwbGzph1C52dZohto1NvF/6Kxy"}]},"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-fab_0.20.0-canary.65787913.0_1603133468489_0.30625667019882874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.5485fba3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/fab":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-icon":"0.20.0-canary.5485fba3.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-3u1YZuoxGWNYMCsuHzI8xSJlA8apDR8vDpILR8KlAeCuGS+BGw+yxfDpZqZ5QTUbpwraMaKGQa2+1S7bL/VSRw==","shasum":"dff0f2d4f3b43ae11be19d3315f4b2dbeb582aad","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.5485fba3.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQDCRA9TVsSAnZWagAAZkkP+QGGyB4/QGw1UrNjWH47\n7AzkacKW2MnQY0nzZtMabvJVUKsANRPhozHHQ28/Rsh/KWdHRYGKfplKhsL1\nZsPF9hZtxLsnSGLiChKCqyztpNBFoBfmvxOv6lIs6y32mpQDy/1ESdfozFVr\nj+DXcnbL4Hw49lQZvL0BjDpjGDo5Ob4LEVPMbGxjc3g7g54Y0ujmsjwtQNxG\n5J0MBYqpAyGuN82knL2xDe5pvJhXDPOu4cz45511zKLpms9CbY+9Bjus1R60\n3IMS+no06zwg0TWPRm23r2bZzcRObqT7GB5qlm9e92r/noBfhJMmZiMVh8A9\nmNia8CxXcbpMZCwDSthUNlfY92HM9GDi60oqp2gqcB4wMVox1TW2mj6O+8wW\n7NnotU8oiwucc/jBjPRta54CnRyH9nQt5DgDND6ZUTJfqd0S4qBfg1FQnF6h\nyNsgmt7K2YoxmiJu9P/rFkw74FjAeMY9KHnvnx8WVKGReytSml1bwdKtDtyL\nzfhZpidHs6LGGWiLELPPAsmC/ZXcTyOegcnmW6E0RL4wPjKgPRwmk9wxL2+a\nQYFM8qFNnmH/KxTQ2EJ9xMTaOCICJyKq24xasLjzHJQ8ohEeW0gl0A8rh0OJ\n7x/dUJUpVNEFa+VagejyzNpwY/n8X+dJeEWB8dIgD/vwxbnD4aKSHCWVCC25\nG7Ls\r\n=uK66\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXcrzfUqmzpW+Gidjwcji6tieJqVfk4sBc8VWGZHAtZAiEA8HBSCAyxLwB/ocekrTbh+ig5VBhTGpaLIzHiROsnHT4="}]},"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-fab_0.20.0-canary.5485fba3.0_1603142659489_0.16642249337899107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.a39d0a92.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/fab":"=8.0.0-canary.43c1c5e2f.0","@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-icon":"0.20.0-canary.a39d0a92.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-UhYT+QPRTx6xOfK9CPNZKxTvZw4oqV/6g85BvX4VNeabLnGp4Wk8nugO0L4AE0KXIEW7oaYJO1kIIDfps5aqtQ==","shasum":"ae91d32f17165231c4fef33c582e8d7520110785","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.a39d0a92.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0ntCRA9TVsSAnZWagAAN7cQAKUdxxaQ1v7M9GLK+lXu\nk9Emc+xL+9Abx3boP8aripgF8NPkBy7ZmnGnYMFHfV5KDByH5r6I7F6aXNsH\nuOdG7qG0kljak7vB0Zjlp6S7+ywZotQMWTBXrCHwXo9zOlk2DGSLqovD62ke\n8zzZx6qmy2nLHp3hz8hoZpXl+DVZm8Nsr0+dplxigfZzI+BG8DtMQXfS+8/V\n2dxiklP7cyxdys/s7SjAfW7b4kWq/9scgd4bASo1VC4gN9nF98i9Jq2k8vh/\n4RwtJQcyMKCYiRnbeuG3VeUyZW4es1DVrL6Qjo+BgcrCGlLeqEzvPjuJ80Ye\nUGcHZUAtYXntR82V9Ku+TrXhpJdOzAXbsXBmyjbvsGI+1hXFehP4kpPP+3Oa\nO0Jj3mGXAAO7VrcqAUiW4N8zGpHyOOQRx+ZWxHVXpmhPRmO5PTk1MNJJ5qva\n9KLW6TudOk4OG4JNwBRlClwUFZN9Z4YzCyZfT06gmpqalZI3KMDq5/dEZwXO\n4J3jAGUcp/UpRj1AEWfvASiaWPfYY9ghFkrAdLH0IFDmW8FuUsMRKPkAQgiB\n76Wu0x+jFp8raQA8Y66Azp2XLt4dkeC4yZm02Pz5eCpF7JlNnHDoKgWcV4NE\n0xJXLRghuFLPWIlq1NWgzfCcN0MFhOijMLIsF17eg27rO4ycAhcDv83VBWME\nvWuU\r\n=48Tc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhNMmLSBO6xF3Hd33a3byxZaBVPQR97rwTrAe7K7OxugIhAML2OJcv/fqluQrN19KDE+OcIh+5ca4JjwhKYam8/6ON"}]},"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-fab_0.20.0-canary.a39d0a92.0_1603488236716_0.889268144790184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.4eafcbc1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.ccc64eea3.0","@material/elevation":"=8.0.0-canary.ccc64eea3.0","@material/fab":"=8.0.0-canary.ccc64eea3.0","@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-icon":"0.20.0-canary.4eafcbc1.0","@material/ripple":"=8.0.0-canary.ccc64eea3.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-M4RPURPSg4wsmjkbjGbU2NasFOhHcGx6eH0Qn3UBJdTeLUULVVa8bVtDA9gNNYPP9i8HZlY9fL7D8rU3CweRzA==","shasum":"3aed6e2cd344ca9d39466e054c81dc89b8058867","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.4eafcbc1.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YECRA9TVsSAnZWagAABbIP/jk32cw1i5Xexxs/UL03\nyBSIkmbKnPTXGey0b6ZktUl7k3jev7j6e7ofH8Vsenly01FveGiTZMWjEloV\nj+l/NBdZyza7TmP+QmSEC3VA7lpkXZlzyUDc/PYCGeMQWZ8kHbSgLH/zXneE\nLIriJ9N/hS4PuzM5+1S6LRp3XZ21gkcP+gfJYnWGiqi/RltuDpN3gvnq0bTC\nrs05HDoEKkF3G2vyPZZGJuOl5htWmbiYyxvJKRPEsRhN0luh9K7w2aRNRQBU\nwkjfR/nAs1RefC0+srFBJMVzON0+m7TtfYNqo4nvURAIGiIbryLJX6vRRPx1\n7UbfnqGAXzjG/WmbpCVD6Jm3U1uX3FsVw2FPP+yr+Vf03vPGNT1yXYPEgV96\nSbY/p3gAZAKu8DkoKK4fd6af6EqL2H09THxXkLYStls1vifn5Vc9A4fneFzJ\ny/vsBwB921KkORRKZQ1j56LWlzECSU+bIGt0hUArY2QR0rR7Qr0PcWZLGNLP\nWwo89KguC2zmcJOC5yLsy/fGqUI6OMYJT2flRGuhHX9VirxGP6UTI+q6JAL3\nVIgwASrmQkPHUvwDsfXYenDm0RAtKPFZle3dniC+s4WzrKqYU/60HvrKnVun\nk042UoggfQmqhRJKYm5qDQciHlgFmuuff2gLkoNiTqBuuAu03HrR3h73SEgs\n20+s\r\n=k16G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAj84XmNXQRha0wAxo+LagYxKS39oOvFGpbHY2/DR/qfAiBkYj/geGRxjF6uEJEg1Jp0NrnsLXuYw89JO+QKplX6dA=="}]},"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-fab_0.20.0-canary.4eafcbc1.0_1603761668011_0.04390959245159953"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.32961593.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a79cdd019.0","@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/fab":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-icon":"0.20.0-canary.32961593.0","@material/ripple":"=8.0.0-canary.a79cdd019.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-NvT0G/clfEJ6waF2Xs5SZR1FzRHDInTN87Av/I66eaSklW5qhsNCLDZdzhhKGANchgQpSGrMV3D809Xf3XsU4A==","shasum":"5b9a30274defd458b957a527ebea6deceb5bb1e3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.32961593.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL20CRA9TVsSAnZWagAAHe4P/j/I+3UBdBspp/sTOF6p\nSpmA4mLhn+v9HR6Hc6qvDe9390FuWoaZblzfTq8GC7qkgXkOOrT0htQl5/lH\nXv170zC41+uPPHUfBY3WyeMMHdx1S85dp2y6W3QthEQKEetYT9g6JrMcaJbS\n+aOKe0gN+fjlpE3azJRg+MOG9VaOI/FGXloeHjClvoaeR8DeAV6an93JituT\n08EfBr+3pgNNEY47OSC2ch9cL2pHYxsfksNWcWco1DOx8y47v8BPwviD6ZX5\n7vpFrC9k9IE1C/ORArQllfVkfCg6rWIV1/N9xqTzwmcGqulVVMGfqWROPGPi\nY2q+axY7WgFP4778aHBQPyQYwiMuwfzfCMZYx9hQyqYI5x6kQrBldKqf8R/F\nYzd94fpRNaHIU8Ujp1xoeNjQM/SUi7VEbTd2cxxRoZzXnLGlQaMZz+nuX3xF\n2SRv5HJkvHNKVkN4Yt7naRH9PeTF0fyxqyi4v6TRyuhVSnK+iJDLS6vhlH9g\naEoU543Eek0v1ePDNnHzJbfEV01QvqvLvj0jqD4HTAoskeDBAOlgdWFOTZGP\nWONA5pHr8vSyuQvF81LLL5twDjXGU5aftMkxJEgZM9elXa2alkb+LzYtkVJ6\nbAiNgVDyOwT+i0llPqOtvz4Yk4gP662qGd+cwOtGXuM0QSRuCO1aVp0pCDft\nwq9j\r\n=iNZu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGY9rFU7wcn6P/q46ZUUoj6QVhY1nBDvgWYv4LFC4KYjAiEAuPV4KhzO4C62fg7aoEiTUmuFaFrGMI9GZcTrY8qBuJU="}]},"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-fab_0.20.0-canary.32961593.0_1603845555650_0.6839265983441747"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.8e3a0601.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.a79cdd019.0","@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/fab":"=8.0.0-canary.a79cdd019.0","@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-icon":"0.20.0-canary.8e3a0601.0","@material/ripple":"=8.0.0-canary.a79cdd019.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QYkmVIb5hNqcISELs+B7L2fQ1h0gcqcTKAYaXb20olb9PHuE9bPKAfJ4YWHFWEGH4hEe+dK5ZtC+30NYhUBwZQ==","shasum":"10e44c5abbfee5184dbdd478eddf3508974a7caa","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.8e3a0601.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYBCRA9TVsSAnZWagAA81cP/A+yjDA/ts2v2jnc01GP\nJgrSNtT/ZDYU5t0c8F1aymJjZ/ncIgho/iZdhkM4Hj0MrzsQxeDPZ2GP1ZPS\notp6FjGaO+b+j0KSmrCX7nkzpWS4nF5d4tKVGqFmj1C36aiqCZo3b9TNZ+w+\nmQb5wCvIKTcPc0OmxsgDKDTjh0KUCmhmBg5Bmcy3XMi5SoR+xrxTRMtf/Zwf\nQq+pGL4LSDp9EHT5GI28cjTkUyM2PDQCGct8QXB6j2piFm44RSjTxVfZ73CZ\nomGQh3JGaClo5jDs9j9y7s05KuImNRgzORZ3gghlA+tz6YEPfnGQjaUBIqLv\nhPmqOx0zro8wUb6Ht7Gz6GWpHtWOjAJLPRe9zGpfURj8pgZlvO/hlowUbJNG\nV9dAZRAqavZdUeS6Oar4gPumPEcS50DTbPERd103zGXEkWXuljbwMaVs3Zvt\n1WpCezYZAhSLp4gpnEeYjkKTkQY7hm4nOD7gTYvDAjK6tv4ajSKOaxX1sL89\n1tGahsrqAVsFI6fZBipa8TebjzswnjjRwQT2SZ/CnH8Z4IiXF62pPe5h9WPA\nB/Ygsx00JwuMwkc6GKsTMYARQAD4c8ohxUZXQEahE+YEeEXs1gkNiClrVCKX\nn8zirLfBWsOUWQ5jYJsWASDUDwNiTjfnzwOdj9SvaPadKdT9fcoSAPGpo94N\nFets\r\n=oaD2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIdJKrF8KCuDRgYu7Tq89HrYVlOK6BwtCNjhCVesUd2AiEA5edZBQCxh1M85ZLplbJd7V9WhM8IEWYg2gCzvj2Ly8o="}]},"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-fab_0.20.0-canary.8e3a0601.0_1604007424844_0.7205967943152352"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.178c25b4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6d9648ab2.0","@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/fab":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-icon":"0.20.0-canary.178c25b4.0","@material/ripple":"=8.0.0-canary.6d9648ab2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-1Mt/bqImi9g1gTevzXvWCSy7cyJQItfOMMjZ7Ly2IVJ0pGSNsU/ukJ47rA3P0/toKY21695+5ZV5OdSuaunnEg==","shasum":"e236ac4219473efefe09dd87d5cca455b9afdc4a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.178c25b4.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzk1CRA9TVsSAnZWagAASZwP/jvK1yul7QNwcNRY8BsS\nn8eTJ7Gjc3yidq8wahXuuPq7YFdp9MZLV/MzGUwf7dmzLctSmbfjGEX518hl\nmnLkGgwh16KQrrKsSBiGoCtc7B9pgo+uQACT5Kb7i/dYbeLXc01tMCnTx05c\nBxScPfVZX1B4B5R6CLsj7glFdaOo74Mas8Uen1KVUA12AQ6Gt61zLfUMU2kZ\n5wvMgfbD3WUd2HOG5kfTaUKPmWBeRuJ5WDDpGlmJfvkbRWliZT57+ihiprN4\nP10eJ/qrgdeI9PCfvgbeyLy3+txrmQ74m8MQLFlc9/dRrPlv5LXeAwVa38GA\ngkRD99qFD02yla6eC0V59i53D9ExIuq9phd5aUm2WpC/lZwWvcK5XLFHGiiv\n0t6OnYnGxtM8bakVBYgHXkzKnkLT1KyEJ4JxVmseaHi9DQqtWUfm+2mbdxCT\nmGyJR5cuFAh9DkxmFbnSApb7+PsO/RMFXg1FO8s2Lb8LYjOLc4UlfQgAIfCz\n2qSBziCtAOh+e7Z+/pdD4OHGsT60foAGSH2WIZiTw6cEA1wxgny/HQbW2tVq\n6AhlT68Gh7c8Gzg58lWpVOEEmCM4HTvxpSq/QTKU2qF3QywNe29nkLPVSizN\nltN5WaVJS1n+DvSZ5QvnjofRg5C+N0ZcTdN3JOOe6ExIrB8TWjRnWAylnj1T\nSheW\r\n=sHaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5OBnYnessDbatSrBCaRRHaO69MqVGL21wsxBufX0TvQIhAJdXKw3IQXqauV+AqUHvBhWwYEKcKMwfUVClvBdxaBfM"}]},"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-fab_0.20.0-canary.178c25b4.0_1604008244600_0.243333362499899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.124beb49.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=8.0.0-canary.6d9648ab2.0","@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/fab":"=8.0.0-canary.6d9648ab2.0","@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-icon":"0.20.0-canary.124beb49.0","@material/ripple":"=8.0.0-canary.6d9648ab2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-h2Vw+Tmi8udmYdxJjcshGwHtdmnEnOzQrS92hKQf0qhEU50SCdPdBd8TKeLnPqgQYUyNyO2VqRr8cVMU0Tt1RQ==","shasum":"d9d4bd95f78d8d848444980371c3646c6055a127","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.124beb49.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqTCRA9TVsSAnZWagAAM/YP/3aK42oYPA26ih8+hBIj\nphvY6TIdTSlEePtkMuTW9p2VPSIxECyA5dbg18PsrUAJkJG2hy3TsP5AgAgC\nSYz/trcQKeyi6QSNtNB9kUowz+2SO9AuY3yCkTnkCUa5wjMQChjV8kB6YZqK\nyjjWqrtLNAMJD7KWVpS9Fd/bCW5S8jO6VmRmDaMUoVeWB9ESSqvjzgG0soUN\nsj0rae5WvVMJob7ec9YbsISxkuWVUAxyEZwLMRPcv7rD1vD+VHUpOGKQwjcH\nv15MNh+Rv5kRLNkusIn42Kg0myWs76krnQzF7IcsbFx+AGK1orolaw2uyPyK\ntAsMa/RDFBB3E/zStFh2hkhf8PByl5ltTIDf1hPeqsG+5n+pEWhz+8ED2keW\nXq7oHtsszTfb2eHm+yT16oHsAliD+dhsAL/PScr3ZIplpZk/jVKTDocYKZE9\ngEadHS8yzQHhcXSZ9cWrw+8s9Ix8ott3Y04O4g5RTfAhvoJbWfwoDaPjtx4x\nDIZZ30ZrT5lHLdR1WeP3A+PJ9py3SvqtNkLA5KH68tUGrAJeqAa2NMl6uapg\nuo6iLdhqJCvmod00TO1iuaPX8ZaoFeszBrjemT2ZKqc8pBCyXZaFGUDhyGsY\nWCVgwoOaOvjUkSGh+4wII4Q8SmifEASTvxjz9lTnBsfAbskoY3pUos7ayema\n6aBk\r\n=wJ67\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNczTTxWdjGKaEGt8RDUeFPPi+E+hr+DUy+evFpTd/fQIhANydaEaGnuoUzxUFiEl7hLKPos45jeZiuGAQH96BHEJU"}]},"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-fab_0.20.0-canary.124beb49.0_1604102802729_0.8983127600037932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.5937f468.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.d6b5cd418.0","@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/fab":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-icon":"0.20.0-canary.5937f468.0","@material/ripple":"=9.0.0-canary.d6b5cd418.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-bbK1XkH1E8Ovuu5m66msZroU2eAo1185zRQfvggMPqrirQP9W9Cu0b7qAodk0x51GYCkWLJr+zgGMckuag6UrQ==","shasum":"13f6af254d7d04f7f1c73e8a50a8d7f88dad538e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.5937f468.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxeyCRA9TVsSAnZWagAAyzEP+wQiwqub5peTAP1yFd6l\nl4WyeGivrI7XJuCf8f4Rx+gLjTd8BivqQJVnAUdzlFBpHsYAMTnQVZ6SlU9Q\nYSlImGrWJCdiA+MaWtvGX3n5CS61/4qpsM6J75lkQStQmg5nHsIRbSbKHelr\nErFqqjRuGLyODOEdQPma3B6HCu6JE5nvQudNF5ns9Fg9ZqtKQrbJi49qA9kb\nxONJWhFPiUZxxTIQmy8BdTXHwcP6Gw/e0m9ObM5Gszl0tLkSJfNrAgwM7gLY\nOn5zxYgd3VC1SfgtlMtRlNvb0HAZq2tlm1nC9Jir82NQT+ziYg5SPs1KXwQU\nEOKJ9XHalyEst6tiSVbd9/mmxIngDDnnaonsi6EKJJXrETz8Ryjpnzt64cLG\nuYacv4Qz2u2B11I9rQ2fRT00q8QSz8NBV+bk2d8ftWwOElKW6Pk61oCUaPuz\ndbq5dibvc12789rB78LJOoMqJ3Vk0qFdgo7peaw4xrtk5QTVSA/h7v9RpB+W\nR0S92ka5nIAJLH1+jsV4t993ZRtPpddo9QrpgiFHvQIgSiDuyBIyyeSBHFdk\nBE7oycQtgXBXFGNJBghXMBQl2OmiQwaRM9PXNxQD5/NEAGd64qK+FXy5IAcs\nF6oTJZp0EevLQgb61CPK+uUGs+5UoCuRJoQOmW13+0PazISa2i3t0RtbGMhk\nM1LX\r\n=Czjt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEwM3f9KaRhtTYZvRIluglmLURD9bNaQHGf9j+hHPCqQIgCqhOzfoX9EMNxKRRkkFJxfq/yvGl/oW32hsDl519cIk="}]},"_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-fab_0.20.0-canary.5937f468.0_1604523953697_0.8422680278224761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.a9bafaee.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.d6b5cd418.0","@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/fab":"=9.0.0-canary.d6b5cd418.0","@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-icon":"0.20.0-canary.a9bafaee.0","@material/ripple":"=9.0.0-canary.d6b5cd418.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vlib7OnFKYsRnQRmQYbjP0qXhseLAs7tb4exejFfRB+QR+sTcmHcF7/bOAGawlkauSJsY/R2fnIKeL2eEEzmwA==","shasum":"bca8a88591bea28979efa15784af7493265615bf","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.a9bafaee.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0eCRA9TVsSAnZWagAA0gIP/RoqtNRW0O8mF8FyJVV8\nOhB2b8cdBLw8Ak9EzMG6NCseyvMVcxOi+ZMbIDINOka78Xxw4AQh8UaMot3i\nIQ7PaLDR5fOxH8hoPqH6JThA+aTl6Qdn8qs9Q/j/MeCKNybE+mVWJxtAjQJw\n+FvjYjdd1icTQ1cmEOGksGZPrshb5oBrjgrA/46yTGyoZbGZcSVPMEEswoa1\n1AirFjNLE+zTwOhXf/tePpgGP90nxHLnu8/fZIz7S9JkrAeJ7OGVON4ruSdD\nm3otDj93cwj9hi4wSR2G8flZMmCIkDumCc3Ag57PU+MuK2vkaCqR6K+Slsuf\nCZsOMdG3cicbqAe+KoznasS3CXGNFWdL82P2LhQYsza1MyW7TKv7I8tnnvCr\nU55TMy+iU2SjSextauXIMaCUzNuzqI+86k3j0r/np6F6XrkGGaq/5X4wE6N8\ngCRp2A/bc//EOOkEawG0hWPFSw0bfQISHXcGer7BGGNr6FRx6l4K2BR4KlwG\nAT730Cy0BfOZiWhWCXx1PM0kauRgNSMHWkA23Divw4d5rsbQnbPSRKdY3NK/\noIvcwOSsda91O+Sh4+UA+C0rQl2Szw95NgeEcwVoehqzymK9S67TDre7qDLY\nNdsbiXJEpqniUOK+xdwtDKLi0Hj71mLgrw5EwxuywJV6LJkjvfLMqwCUau8L\njzaw\r\n=YOMC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2GEhvsE4N8F4wsJP8nLok6GfLmmZWMf8TImRt4Qr7iAiAHBxpbxO0FRRUcRoiUPkDUzrgV3AKOMwGToZASVbNIXw=="}]},"_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-fab_0.20.0-canary.a9bafaee.0_1604615453997_0.6727046245912185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.184861ee.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/fab":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-icon":"0.20.0-canary.184861ee.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fOSsQn+gw/a6kkFvO+nLBFTa2TXsFbDF6ND3DYkio8qWIEjGTt82fWcw8yINU+ZROeTz2GEMqy3U/esADZaDfw==","shasum":"f8cae5ffb9143350b57d085713940b5cdb5986e0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.184861ee.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexdCRA9TVsSAnZWagAAf58P/38x/9VAHxp76Qvh/u5K\nRkkGQ3fTYVwMAeYQYrbJ/m204muGCQzqvnUUEGqFHgwWgwxGBGOKuRsN4DED\nHPGyoCLxNOVAf/Jj9ONZuZMsv/oM4Ac24BIew5t0IuSomu/iL3lUQs9t1+mg\nAEwLTeMU8RR75H1ICoQNO67Eyc1dDaHWtfhjNk0VYckRuo1t6vynR0bNWqU+\nDQh6IIsnyE0KQHKJLf315019Ucumfs00t7DgHp8w+obDnevKCgolmu6eZdcH\nK8xgVKwGhozepvfdho2nyNSm6iitM5bgYX2QrZmFBVNpK1BwnbP04yaxbND0\nLurr6hHO/vFEBEiYo/WuTpfsNh7I6tceOdUysjsbfwfTj6hnKPczDYbYPRGy\nOGVEp9OSMzrp6SArCCY3NsonP9w53venpW9KG322Tjw0cnUz/3EtpDSRX6PQ\ne+5FWqGl1kY0dObozAa1X0+ur/+6OX12ApdvY9LDH2h4Ul081zr+e4rscYN/\nnNwBw/DgPaAMb/ti4fdPFnLzP5TJB8RSe8cmoPBrF6Wz+W71qrAGSqtqAIlb\nM6bouSGODSzXAYTzpJWH2n0muIAH49FUdH7BkdBN0J7xdp6mSi8upCnzifUy\nCBMYpVkRu6gtoaHWyi7GBlXdzju4ORJFGiyTnNaaFg/+pVKVeCbReTffqy4a\nD0E3\r\n=M9Zm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMn2H8HJDZcFX+5zo7xHapTty4Z6R8nv5Q3f9TPYy+qAIgZwsRzh1b/932dPuiX1y+IGf38Y939yqyvRtNxkY3dtE="}]},"_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-fab_0.20.0-canary.184861ee.0_1604709468464_0.24906723313235335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.6c6ae2d6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/fab":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-icon":"0.20.0-canary.6c6ae2d6.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ALODXVBq3SVwq7jILuPH4P8mTC4sU/XRsCuqDqrBWgI9Osb3XBvCKAU1KZwRD89VmOxikIwKr5fkK1JIIJTlFQ==","shasum":"0181ec6f9ea5c17ef9c3226666874b1891b51eff","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT64CRA9TVsSAnZWagAAezAP/0YvGr2+kebKsNthsV7f\n88t064OEEiSzN7RJA0Ih/9syfJvbjH6WWjA+8MKCvNX6rstXe9eTsfqWkiwh\ndzUIv4npUiJEegsZQDWyXT0rfv+A01UtKjzBI/S7SiIedNESuHgpnVrQbHex\n0Msgx7qu2yVQi6XrxnYormJ+/Se4J/pfRw+qO49Q7FPYMtVyfIGKGVeg4K9D\nXqA81j/xgIlq7ubJfAGyYfWkoqDN6I7JLs8PkdqWhE1WRph7U7fA+i2af/32\neO97NjUWt51dxeICfBXWMX3RJBBdsBhvlQc4qnGYGZgsAGZ74HjnfO9/A13X\nTqodwTiqpXtO3WZ9MS+W7q9d5qhjw5Bi4W0ESvYU7dmmZeFFZ/oEC9UUpxFs\nBYHhbr10jJ/nvev5ZG2jUWO4FAxtswQG7QM/qwDWZEiOETF8evmxz8q06oQZ\n9LJbVITMbpqSSIZgApE6h4U273y7Rhbef39B41MZHvnVLOIfjRj6s/GNYBZW\nNp8NvvLtMC7mP8czJ7aIUK93NTsDXAUMbz3rFXX6yxqjuCzRqLJDTT+ii+kQ\n56QfxPMSbezZHfEo5X+hOIxEFtgB8puVQSZAeNUF8ZrrNePci+Sk1rXXMqWa\nWk4QEECKTUTPtjlB3Ri+Ly9HQEf04sHoZEeZjoNgtbUkqqrgEsFtGOhCadWI\nuqZa\r\n=VaUP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOAJWpmet+r7LI9ywbl2v/jOl45yeaj33SZOit/q8v7AiEA/YHPB2uiG2TOGwxB8GNkBrGiB0ALSfvIfG1IVtFVVx0="}]},"_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-fab_0.20.0-canary.6c6ae2d6.0_1604927160406_0.5562024678631563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.ea2aa477.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/fab":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-icon":"0.20.0-canary.ea2aa477.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bZMX9OU59ggVZm4OP4xPLjqefof1DIFuNseYNpTVpBO09gDQ1eTOlEfdB+yyrS5qFrKTBAFjVbcmmh3lJeLqIA==","shasum":"5a09701b53c21c68ff09bdf78ece9f8eab136c02","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.ea2aa477.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdeLCRA9TVsSAnZWagAApJcP+wccoDH9HyBRFWGr0Gqb\nPHoZW7eepsKCztM1MYhMYcgmseu9hIWk37hlHT4iwT4JlrnWpKUTBLiZkkSS\nFioB/1a0xmv0GTrSQiKk3dc9TXCav6XZpr77E+C1UF8xf0s0H8l6aUSTmIhY\n0PX4iii2TW9wADNhB4lJGuB3wZCO77c2utEwH3KPD0OjTKJObnQW5gb4PaCn\nPoFccniN791MwlC8BrCywd9KjIiex/03UuVsG/EZiJ3l9Lh3Qk1khYtUQPxC\nvNQ3d8rriGPtgAwtk6eiF9bCysFR0uWzkSZyeYGqqB6puvfNGMzZIrqur7wD\ndv6PQ+8Sv/dssTpiQQvxk1nTJRvii4b8gNgVQmeqEdPX2/gtUaMnLOhllPwN\nJDO9rlyjvAz5qrMn5HhYqskCzFu+vZcnjzWxMLCc6HNiyBJ2woQRxs5xT6Gr\nBQxMhpMWqMNLszMFL3JSipS2A4AWaRdmUp4WRUSqHSxrATb4xUZ7F7TM31+b\n89vjKuGquS3bsA7Jqv3zvosZV4CMnRwO2024jXkSJBXMcUcavEeVth1SN+NX\n86Abf9pFIrXFP2Wl9IdxCxpGb56A/vuP5+fQzgnwHwPzHMBSGj7PmhT84VZi\n/Rzibje2tdAB2ixZwYqbkQny14nt+o69tn8Q6C0034EbRzx3xq2RkyYNY8fF\nCnnr\r\n=2OB2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDY4SyhKVcQ6GXIMvdOamSNi6c35w1sXknKF4ojbTcmLAiEA5xFZpQSQ3B8MjQRfZ7NA9c96k/SM3YObmxFJg72W23o="}]},"_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-fab_0.20.0-canary.ea2aa477.0_1604966283428_0.9414563789546142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.a2c088dc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/fab":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-icon":"0.20.0-canary.a2c088dc.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-HCsty5wEdq+7WruDe3QVFS7tVp3NLBNItE8O+fso1prDF8tyWvK78M3nhlHCpzSlnr713lfmmO9vHXQd7pH1dw==","shasum":"2693e17b5621c217f0bd8108b2a925f10dcd281b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.a2c088dc.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKNCRA9TVsSAnZWagAAcjYP/iY0KF4Es3PR8vin0IBZ\nIzVn4X2eo10M5ln+kIh03mcTol4EndIWJT7y9hJUKcHc8mzWXCWDxJmjQWKr\n4RsU9a3BNRyiqCJfZMzeluD1QZ8u0WRvWjzJNNTfZQ1+O+aZ3+ZaGW2pVo72\nHjCJBQGJbGxxzc6ea3LVx+358ZGKzZ92Bw/EQfSrjmKxvwEJEM5n37UZIXia\nbj5Gv33Xtwqlnr61VooQHEJW3W1E1VFlQnHIWWZ2EkHrHHRzQhb7Qf+EZU/k\n3CM0JD2JYoK7v7BFyGquQPy9Q4ObOJ2M4eQanGJUTs9RjEf8XMUSH2nxlH9K\nhPmlxAQIu1KMLCVudPXM34i79vt67MJY69JSZPjdKSEZ9MhTreq1qSCi7hST\nXFfAMYd5qoPu6fOgCzBkL0M2HbN5tCNkszp7VIwDKUCbzdy/Y+phwr5f6HAR\nuMHV59hbywz55XOjOrbZu2pFDP5VVn4Zn/I8r4oWHn+kzEkIHgxYTO3mSYsn\nBb1931OMWRPaWal9M1xGj/MDQCvXSAF55rPUuKw60KJ8gsA7lLnGOcwl2yxU\nt08tAoJiBpUlZSQlg1+gmxGwj0ECG+BlC5c3LhoBzVnBOKv8vTsO3bSGtuih\nUSU/nimwhqNQ+0TuYnywLJkI9oeU9hNLiUgmdiprgybGfQAtUnO7Skhdlla9\n53sh\r\n=NGDj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjEiKBBaQI8bHPLZqHJUY6ZpTOmaX7S7wr0arH5tu4egIhAKCusQZRdSg8mb+YA2qpl4D+x8iJdn3eQosXoS0PJ/5K"}]},"_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-fab_0.20.0-canary.a2c088dc.0_1605018253576_0.8291933962919396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.b04d71d4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/fab":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-icon":"0.20.0-canary.b04d71d4.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uauhdfiSqVZ+P/bM+wXSFFULGYm9qCJPkjSXKhQ1z//otZRbMJAMQRS0Rcs9uoPMWeIvD+K4ZHFiyhHS4S6DOA==","shasum":"7d359ccbd2d8139f9ae4c9915cfc2e73d98ebbfc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.b04d71d4.0.tgz","fileCount":16,"unpackedSize":69411,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGBCRA9TVsSAnZWagAAhuEP/i33vIfpYflitfxJoSTC\nNUIzB1ZjuTy5a5S10F2R2GsXaJyf+Toroug+dChYvMhCJgJOmZKSJ7DI0nVg\nhrtPdLcBIBf49tLUCICOe0OwLwfYDopEQtsK2cLDFpWUapWyqfS5qJZQeT9I\nfVO27GC2BVbYDJXfGfvpPzbQlECwoyuY0DsLMDc+SHBwWgx5KuS/MXCLiqGj\nAe9CRu/sz99QccFbc5XByLVZS7MPH+EVEQe6gz/9zd2yyrFqZ8Zt34uCwUbA\nCXSRO7VnpU4Jj+oZ5G1l0m7UV+2w5Vl5BMoDV/Ket0xPx5gFHwsj229h0nlg\nwXYyzLmgY0cSk3N8EXnYBwqNV2c3ft2AROYZ/zXUkBDITEUmV2KEydRKnHLt\nCRcDH+/R8ZCg956tGTDizfQkoSfujMDwu335eG2+IWl2GDjRCSi/Q9ZF0QWA\n/wtw4btc5BuTwvz4xdxQnBMZUYL+QIs/g4/Phg1ydhGP8IO/X9CwOXgcG1yg\nFMHrxgJ7ytiODe0++xvbAXovOay/NPqBr9QspTbnvj1GI6wk/LKEu+ko+AIM\n85pTL7tSOPgoQn3kygcQbCOIUa+8cMz5xSDDoc2Eqjg8BhNwa3rFua6o5nnC\nD/IonrXXj6JDq9YIzlPN2dxe/WvLBoO3qf38uX3/4is99VFSG6bzQRUdI0yT\ntyiv\r\n=y+LK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCRIn8VvjteEHHezMEpz0IGnrsqaeDJijl1GrK/3HtGwIgRUIybPWr4FzC18JErgnNwNPsZBONGZ9DOLbkNWgbet0="}]},"_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-fab_0.20.0-canary.b04d71d4.0_1605177728676_0.23922988329937733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.2c553352.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/fab":"=9.0.0-canary.b39094d14.0","@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-icon":"0.20.0-canary.2c553352.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IqgbP9ARu+ioSK09rcRr8xyIHAt6YXIuOBlN2sQlWJqi/AVLFatNEaW/u925tWi77aR9+6NEVro51AgaRLGZUA==","shasum":"5dfde88007a5fc2fdaa6e8eb8b77d44da943844f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.2c553352.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbprCRA9TVsSAnZWagAAbMAP/iOaPUeqdG7i8NxsQfG9\n5gNpKCU50tsjzHz8X/40ZUc57dKiMVNUVYDoyaMpLbcbDH557cfFOD7NJpwM\ngHdYX9bWmH9i7GvoYF6QoD9gd5drQUgvoRVqJVcMbGagwIv3J2gqnUFTKHHZ\nR6CBgUEvU1dyS0G0D64wjuob9HWDmcmsS3cJDyeP/N7rSH5DH+wo/udyezkt\nX5DFa0hKjz2kn29BlATpHRoeot/bVLIF7+AUGRu6AGyf5M0nkSFu6VcyidIY\nJpWRiIGo0Qdv2NKhEn167SiTK6cUULU9mG1usp/awsW2NhGdoDag6hwDvdZK\ntl056HlYQ8nDx6kqrEqLkFxlNrKF1D8MuE9x/FvawvYMjo/NxVuc1RXeSbAb\nC2cuc1Y/WDEylDxzj6cB8Pdj/rG4CyKomK1sZlhj0C+0Nc0X0UvK80VPUXad\nZbUiXDzsJYolwNrnIzU0iC5TQqa14SmlNMt1n71sDFpf2qT4gjYIygUQvUHL\nkQyWK22gn1fy2f42uFGUEczRDf6HRP1SRNBguLVxEH3811vS0AJQrbHQaV2y\nNlzpR06GFTRrwr5m+KC+VhTXZ1fGNR1/f3ifi4H/pR+4d2OWAgoC2FO2otii\nFMHDlvoCu4jFhApVJYTJrGzQ7G6b85a/AtyiTIri+VkXnQLtCm19mrKmoNM5\nTixZ\r\n=/cjp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFcOuQCTCPA875ETAzwd53Mz9P4WiDPuTWHyhIfjHaCQIgLjJfh1/3HJBnkYumpTv/ECGPFLHcwrVNn+vC9fG0YJM="}]},"_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-fab_0.20.0-canary.2c553352.0_1605220971240_0.44388219666057993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.6560d19a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/fab":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-icon":"0.20.0-canary.6560d19a.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-873cq6E8sbGf3BCY+/od+O34w0fkjyoysUF0Hf70BrWRHMloDRlnAoitap47kA6sfas+SPW/UWzLUChsw+71Fg==","shasum":"7eab39491699543e46a72ebd117ba2b8d520c0bd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.6560d19a.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEhCRA9TVsSAnZWagAAi44P/33mK9xjAxJ41uxasbuv\nHBSVWzxPMvEP9jU2fWfwmerHErUiNqRoXVijoL7R3xgNolVuuujY3RoTfn4W\nkYtJusqTuCZ79tWswMEygtTAnwIItSeyjgelvoARqX7GaHEDbcioAXXBaVVN\nk6dmnB57fCPo87buhqba3q2Jgf1WMDSfRrBaf6ltijLcaiY8oinHu2GSGMr6\nN15Mcc9qF8JRUCxdb5Pxe4c9bu6i5LMFA6nfDlGkkljca2621F2Ug4+KnC7h\nJwOaNu3p4xt6iMouYCCMVpPfeOeQJwOUPzkUzKxLJqEyuW+9JLvJZ9hNXM0R\nmd5dGwd778hjcaERoA4022vVPX8BGWfotRh1brdcu3Pt2CE0AP7sOCoqkQQb\nQ1trkqMu0JJeispyzGAkHgQ6LAJXDwJJFzfgQCBWFoM7hYQgxlVxU1wcoeyu\nP6fE51ptK/QkL3ntZCdRRy1mbywDq3vQQCppwSHfDcXPJUyFWZ4bUW/5tvGN\nnsmCr1eUH14iQDOW/Ff+rCTgA6jY27+mSHmsCDSd0M0OrdhwibKk4uME8Pbf\n/5uDY8LVf3CkKfJkFa2kBMmkq7h+uANHWn6cSknN4xXweCs5uqTliaLkQoL9\nBWjCGH3HRoOe6pHFTPxtBzfG4drpevdcTkgJAdZqUplWfcYu5FVfrgH9NkFM\nTqM/\r\n=fl4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6bv91HpNqtXrVHBratsXS69ywFrqN9liV/2Kw/W3IsgIgO+PZC9AavxICBrRJOueGj0ryChkGEjTz3UnECErfWYA="}]},"_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-fab_0.20.0-canary.6560d19a.0_1605300512631_0.23901212313075226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.a28d5ec3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/fab":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-icon":"0.20.0-canary.a28d5ec3.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lBVFS0YskNJsYRzUeSFR8TGAu+YWR0Iq/LYIxahWH3fKY8OKA7GuSkWeu9J3skbAsn+FuTGIyR0HDG0xhB2jMQ==","shasum":"71577c75c310ca2d482a6c3bf8b113dcbf82fa9b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.a28d5ec3.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+saCRA9TVsSAnZWagAAkfQP/iG5HFTu//PuBbkWeT+V\n3mtPxNIeNQxi7MC6WlPcmi7C10Ac+bGyu5soaz8RbS0Z/1VraYiw3McUPNqe\nl9Oyr1WY9mtjlYrFw/8UNVCHXJOAZMnbNBnF/fFe9lCOiMECmr9WAFoKzZFn\ngQIU++cp5LxyR/uWhrWNsGGdWxM7Ajmfcy6AtvY8FRVqU8aTGfhOMU6ZgkW6\nhmm+AT2hX6ns9n2gawG9DcnWhHp3tjxSIHx8LeZXAenhFGw0yO/d+PBJW///\n9NQdiugmetqjQuqQMLUk6Tb+LbQxGYttn3pyXZZPZ3+68/DQnXCAgv/2Pa70\n7V1O7eFjPNAlM1qtb3WHM5ayansLjSo7hkR0FJFe9WthgZFAsoWjQj/EJTAm\nFj2HwgHhx2+wNOb1Q+dwASrt4B4S+ZQ437o/ZrNgXVlUS7IeuI8JI0zyGG6G\nl/jkTPGLJNao0uL9jAM8+iLhHP6jRS0T8hu5td+gZRwrc9ur7tCl0X8PXNRD\nH3WvmvKnrbcigWq7n/016LFQBdhkHEXJwl2jcZRrL3ewDIxTYaDBZhJ4CKzQ\nhDgvA81NGXyxn/ydwmfa3AtivNrJ8E5wGGRueK/WdkeuvJfCTt9gpIvub/hP\nhXzdYmXLmP37yQ9ga5cGV8mLVfTg1qRStj+Dqo+d/RtA5clCk52NLPo8GR9q\n8yzK\r\n=EIn+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlnWHE8jJ66XUEaqY+mWvo4t2eDtRlVIS/BxvB6r+NZgIhAJRvzTV5ZT64a72528GNfYKysc1CShQx0G8MRByeK8XE"}]},"_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-fab_0.20.0-canary.a28d5ec3.0_1605626649557_0.36006085692356016"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.03e7e778.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/fab":"=9.0.0-canary.240c5f74f.0","@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-icon":"0.20.0-canary.03e7e778.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aBREaDa7CAE+4xx+sFJO2VXPHGcxNXFO97uKzff2zONXe+DjI8J/4rZeeUA2nQaaDR3HSNI0jm7wYZOM8N9HOQ==","shasum":"641537591534204c91e58ba969acd5851e9b2a5d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.03e7e778.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCPZCRA9TVsSAnZWagAAiqUP/A3+nGS35JHQXAzR9v1y\nZH+Ti15hvgMMcRaTDRoKdsmrmgJE9saQ4bBaqkxny75+kSrq8L8nokJ+Ohc8\nsVNTL1CnXxtN5+xjvNWwqVUegRM0Ib0bWAsgKt66ryb/K6uo4VcYv0XNEXi4\nKwo0tdtTzSRGDU15yb/7+nvzLxentWfeoKKEnEX+H8m2q5YjmBuIY+xuRecZ\nHel3GyEhsOFvjEaOPUxqQpDpcLkdVsDfSGO6AmgrhpX+g0PO2SGNZRO44m1Q\nFvZlvUhKLcjl/6bD0XxQaj0PcjNB2HJyU9Y9lRQurqIKU7y86RFZ+wBG919W\nrE9ZT/lM0bneyp3LIDAzDJOjXJWssLTVXFd5S4wM0ntvs9lxNDYiR2dS7QRL\nCpLdLDngbyQcxOs/RK+Llmxs6rEIBv3SMHhHb1GOHcmRl2jN6TV8sjFkJ0iq\nnwqWUZbitaAV/7jLwjcm4ItzMWK0DE2ppGaMUzTSUXuF6lhu75RCYo9ZqPmB\nAuhcyWN2EnpBIyZVJIYtl2bRxAK0t7z80f4pT7R9NK60JhLv8Yok2goeKh2g\nmC5YYrxTfZqMUMCozRc5OU56JUWsLphzSrbYMH835e+vH8jBiDZjPbKtJz9M\nlw6GYArd0ritTXmPueHwrNFgTgxKTDBjrL4pPUFBuzlO+xTd8AP+XMjXFTnR\n3wt+\r\n=aC0J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzwNajJMMvgV+bQ3qQZEUmTyXYCBlxyfxugO0AiICwCAiAWXLG5LMEV272mRP5VKmsqBzJddoNQ3x5u++diuO60AQ=="}]},"_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-fab_0.20.0-canary.03e7e778.0_1605641176781_0.6838136618436836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.ac8ed597.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/fab":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-icon":"0.20.0-canary.ac8ed597.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qAFkou/6tC+9TVHn4BWAY99InuTHzACtsQgEEwStXVo7BiQq2i2UinXKbcVpentw9EJFOuOQwU4xvVq82t6hRg==","shasum":"6a0533e51a6becf10d327152d719ee27f02b3d49","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.ac8ed597.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqtCRA9TVsSAnZWagAAIBAP/0sB/sTsxdHfqxDbvIpA\nPdWUr9xs3rzgRiP9Wg1cXTuV9tPElRtJpvz0YNO6fqALkwsUmX+xfgCJyiFj\n2o8SjsAukE2uWdbWgYKkW4seeW5xuywXxP+ORhq6vvLY35GVMGVpHSpo2SsV\nASph7IO5tjc+cDaSah44OWaESCaYVIxeWk7Y+IXbGqyR7b5JbjqGcQYiTMAy\n1xIP0mnCZFloM9nBQ5RqN7b8G4EywvCbq9TY+Uk4tu0RebPS/tIQNKVdDfdX\nNHjxhyMke/UHZQmYWITcVU0I3Hsz7xMIKjYQX9ft8uckVAObYSAqhvqx8xjB\nJ71B587/pCeJ3CzFOUNxtMNRhvgeeBur6GhVmfFKf6PddAb0xCkkdRv2uJA3\nlvaVzJTaTPp2k4ted8+l5ZPeyGPqoFZUeLxDFV3mJYXMcXjPj2daKm75PfN5\nnQZo2ZCiA6m3WwtVtdUlSNY0vv1GP9bu15j8ZNvjvwSGK6ny3fH8e7yXr2Di\n5pjQ3Rs26OUO8T4JCr3p1sn0CE5HWEuV0wNwFvsyckyUYNjliP5Zo9P8btI3\nKRld437qak7lDSWfk7KEkZCXh4qZnDhdXEIWKypyhr6clP//WSTKCuN98DsO\nKNqaiviNlyVWJVuXb4Y39XjFfRB9WD1NTXbkE4mjX0LPLzENHIttARls/zzb\ntj13\r\n=SDjG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnDkLDtdWJqcwqDxwYM/G1w6Llx+3GoLJXt72y7B+CFAiB9DmY1qCRlUS5SG77h/IqHMAOcLW3CmTsF6qTK+ACj/Q=="}]},"_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-fab_0.20.0-canary.ac8ed597.0_1605651116618_0.9312008323507395"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.b6a60f60.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/fab":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-icon":"0.20.0-canary.b6a60f60.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zDi2ictt6V9aSvkThcKb7xdIx4tw3+EQm1zRbqt44Z4EWYS+iY1cNn8Xuv+ChCb6rQpzR21b1n7oApa6UUxYgQ==","shasum":"715d980930c8397444c29425f135e2be05122eee","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.b6a60f60.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQgCRA9TVsSAnZWagAAbmwP/3waWsfwGSV2sIPDIfCK\nEyX6txgyiz5FDyIk9hBLm4bl4xENauO3CigqYHj+VShDuyu7xFQZqUq2Vzyu\n5NaT7Y13FgzPljNXPeuuf4mxtSflbg+JvbbM7AqBlWmOTvIF49rg5TLsTbxU\n80O7cHLdSw7wjEx2b07eD38iN05fIbifhPNgsxNreIyFZxqvmYcsO4dhMk1E\nGRmCqLZNvH8wO+bgcsDV1pf5T6di9/i1W2IYcTJ4KYmqC5M+7XHIV8RNDKzN\nZyaslyl0snsbNFfwzj5Bc97JgevOMK3KpH7iJnNhXNBLpF0BSqiGXyQ1Z6WH\n31j3s6htfxzph/XumXGz17Mx89bYpxXPo5+cpB5XnhGngVheRYqk5zlVs1eU\nr656WIZV1SwhSDVUv/7fv8Zhtx6elSX3HTDZS+LKG4UVoG+fH6BiDFYfeLsc\nUaJ9xwkc2uXSElGZOPrevkVcr9UAIqsLG5y7rZ9gTj2WUkZLXV1p6RFGoEqs\nRfmRy48ajYW2NaJVKeqwp92LBc2lPfuHvrsDIgRaZvYm2bKfUb3oHgZmSgsW\nX+8ubdAN8URZq8gNsa7nR0H9hf63pyxHWqvkkQLF6/rLjJMOCzAvoNubrV2A\niFEZQKBLPCIGtzv5UrV7dSWrLVF8c/LKkz9BYJuHShzS7ZPGdnt9W+MWkiG0\n9pJD\r\n=MbTX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL0UO/OwpTjXSXaHcbVnhE9wXsAJhmsObvodYHPKDkaAIhAPsVwC8zQCByckCcyPnp9RombKlzq2E4/EuwPbus7f+e"}]},"_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-fab_0.20.0-canary.b6a60f60.0_1605653536209_0.5336710740915673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.71cc24fb.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/fab":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-icon":"0.20.0-canary.71cc24fb.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Len0I/Wm0kr3XkpkxxqO1UwVzC8R9wU9mZa0WVgy/r4iAFOx3ZbevMqRhFZP8cDat1z8XBpTO+m/SfXYk/C/dA==","shasum":"7bba04849127e8971c8731a48f624f32a625e7bc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.71cc24fb.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnfCRA9TVsSAnZWagAAm/wP/32MuFm5/ReLb14JRztZ\n4Tc93c8kzvdKSKqC/1XIR3e6vaBvFRfDWQZVzrCYfybpQjzhU1VUNLI9DRCu\nviK5p9MpFj5U9Qst63xCxgWPWy8XBh1mHKbs1pUBjWgzp+sA5HnKWU9ypyef\n3qSNvjkgSEJdzn2LY2P4fWK11t6MdHYQbHOxT6OKmsalkOjaw4muSimxEb0e\nkUJoQhrjDGX/+z452PgMZ7BlFTjbFeARoPah+PjM6sPPC6VlyCC+Yls6HluX\nSraV4JKcLnzw2pN6sjLNFFlFPtsJMp/EGzZ4E3mr70Q2fkJS5koKjGH6pguo\no1VI63UoXAEGhZLtM6oCMlIY28qIh7gQzTmIKCbOoBFwt8Memy4+28G2kLJ6\nEh9hkZHnFOYYTFHk0kH8+qD11VvwFOhFn03Yc1kYGsBQmAZ/CsZmXpNw8afb\ncUO9Hi91pyn7SeeGONf152MQ8dydV0IX7BEkFaYkFlmlhC1FFlsV3nKVItaA\nEhf0O9Lyim9FLqBY/qFaNn99wYONUBQEXs/dxdzYzgm3+Zyz4VY9hQIPLSZE\nm/8kY+osssBEjZ5zuwHo7nO3atkddb11F88WQqL1DUtvDr/Y+naLa2F6azyT\nhi+FALfhDzsoF2L/LNPd7HOdDTQe5EBnpCpjdyrutacMkULjcNoYvjQtooxT\n2Ihk\r\n=Jsmf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF3V+1Ee4V/cMafLmdsF43uTlBXrM1FNjgtwVEeCSqqpAiEA6NyNn3U9mLkBJYTiT+OsAcuJxv9K7AXci0Hdr7veOpg="}]},"_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-fab_0.20.0-canary.71cc24fb.0_1605655007352_0.5204972748654233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.761027ff.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/fab":"=9.0.0-canary.482ff9091.0","@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-icon":"0.20.0-canary.761027ff.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-EmnvAwWA/o1DcFIJj0cxw+q2CgpJsknu+aanBlFcBrxodT8vSPCBPyDEZiixQStXJWb5BxlQULpsK11TYIafbg==","shasum":"120bee295e774331ad2d61598ca6ea6c710ec71a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.761027ff.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZy2CRA9TVsSAnZWagAAIBYQAI/muJ+kJtErnaJ13NIg\nE1jUZlHIR5yexBViKLN7J1AEpYJ9f1F6rz0q3lySoU3O57sYow6hH9z9egFl\nYZunI38tXPEiJwRGATrWP+bAe0AGagh8E4V3ieid6X25+5FgzAR3S8MjJsVK\nJT7CDqyy9lqsIMD5ESJY1aiXbKTAfd2QTcLyydtvRe52HMWmtsYfPZ/rSc1R\nwoEo+h3R/u0aicwebgEGIHebr0y7/AGmQ7UCFtucXWJADfhxDEkA4k+PHN7Q\niEVvknsGg6J9r6rggvrU9SuSNnet/KD9aQ++BGyfPP+Z3h7QnyFoisPYHYTk\nEjFYVt1+QwI5fSFMpS0Tnef3YKg75uLFgDWZkyBr1xHj9VBNnx61YhyCiqUa\nt0PFOKq4Zu1dvZ69zHdBwynTUi3IwmJKoWGqPLq27pKHD69TKTLNmtMWGA4C\npVZNNjVmjaLeUQPbaleZ1jBAEmc7IdO9tdmo2iJK1BH2oycoe65ElFk0RI1m\nDMmKlKp0hqNkPRTYhBBndUTxYA7fJjp2ctsA9hBbSekOKse9IaNPJSgM0Dne\nqEpfSEUSbedvexbErWOwXQbrx4M4joL2MVz8+LuP1ARftObBExlqmyqpKaCe\nU5/K1n0zZPt8hJkWGsVIIG3eVjvu3xnTt1PRZUdOKx+eMai1m7/XqEVXyD/r\nr0ZL\r\n=fYbk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQzDyDiEwFzGNAN6w8V098mWDGuaYdz/vkC8uDuGptXAiBIPOvv37krCdebODV1tSzYJUv3dagZQzmkg7OqcJk6hA=="}]},"_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-fab_0.20.0-canary.761027ff.0_1605737654568_0.2040855618839701"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.dc93d04c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.99cfb6bd5.0","@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/fab":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-icon":"0.20.0-canary.dc93d04c.0","@material/ripple":"=9.0.0-canary.99cfb6bd5.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FTheln6udOz1JF8oI6envNoOMnvTEEhRZaFDJqOZuID4/CWCHTTwa7ld0mql4XY7Ya6spR/xsI4NsZjeDuwtKA==","shasum":"cd6f10f8591daeeed103d2e6d2af500ff53c83ed","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.dc93d04c.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4QCRA9TVsSAnZWagAAmBUP/2Je+DJkRMNHGEFwgUQs\nHfyYwYET0drWi3YM+vjqbXuuV5sJ2vpeFSze41udYquJ7clabIVnYC00dUZN\n1saYeOL9iQaep5y1E7PjTZJ0r3/bljw8tfnpEQaB3J37FAjyo4w05Y76Gb5t\nPJ47xvSvfdDbx+O7DX7/yWpnpMpU7eAqeSAVex5S/OYniv+gr7rZFiyzg0DH\nt1CcffXeRcoNhVuPkRNggInTu1xEnhC/1wqw/r2lJi7maEAsHz1WUIsWtq2R\n2+sAA47zaefJG8IMClQnMhxtnJjBrN5j1S/baWD6S2kw5T7R8BAugczVsvOV\nA/tsJratiw7MTIgveBqqf3pY6QpQach0sv93SxwYrHuAhIxvmImExZpJEMCn\nZaHQ+MbeESy9FsYB5JQJ2FGgBqSiOW7M2OLTn2kRPgxonoggLLTbWxLWYnxv\n7AI/6VQ7ojXvuMoVeMjBkRXY9r7MC9yvIOvcrtkvEPMFp5SKaWOulxteNuqL\nnPediqhKZbX3kqNQXcPDafJmctBDNe0A9RMvirIyx9xKXcmvhWFnFhNzPY2L\nH1O3SKeTJkuBfbglZFwVa675FhLXgPFHjW5ZbhtpBNp7RWjw7UqtYoV8FBKW\nJdjzSvDm9JJ8MmtOakchZSAa+dl3M478RpEolasjMLUd97T/UeF8LtRkQgqK\nALwW\r\n=d6mZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICEP8pl/KIo8PR26zz9uybkKqxMr21XE3vFdNB/rcl73AiEAzslye8ljyR9wtu8QckJJDwv6MPJwv/ct7+2opshJ8ow="}]},"_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-fab_0.20.0-canary.dc93d04c.0_1605738000368_0.025205793707506974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.4a5d4eeb.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.99cfb6bd5.0","@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/fab":"=9.0.0-canary.99cfb6bd5.0","@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-icon":"0.20.0-canary.4a5d4eeb.0","@material/ripple":"=9.0.0-canary.99cfb6bd5.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mZ1swcmAv1Ahr/6rOV3pDqbdo/W4zfgoQduvy8GSiK0KgR+SPPAx70J8sFgxs7CUbyInlAvcelDTPi8Aw7sDbg==","shasum":"1e274de93f814019304816c56cea52f19297b0e9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldkCRA9TVsSAnZWagAA/U4P/2nbpju9PWf4qpHlP7xY\ntIrYXC3+CSj8AKtreIEfDVoyoKbgH6OkfydvqZfdYBfKHpKsGBa/3KE00DAq\nyqY4C4wfCKZj0EBoV+Eq8J7eZQlSORrjHshCFiiqjDcaBws9epPyOOESRj3D\n/BfaavN2nFNwQ3oXz7LJkey1UURjlhqpkywZ3uPL29ivSyezu17+rmJHrUJp\nYeKKY3U5PY43EWPrzFPMHJ6W2CpgO86wG1Z4NGizy03ajlysb08z8AcVc6q9\n6jwW/owGmTj3dzanCB3+AK+Hh8+xw9UGLKHH60y6ns905BdKZvv+6mobHa7i\npt7oyGfO+KUNzpmI4Sz7/imMeEGrvn2cLoQ+2679js45gUmHUF1gPim+bK5/\nqsJitPihobVAIo9xU1VzcC/akw01LcIM1SCtlX/aD2Fo/o6xFKAXbrgI1+Cl\nJvFDf/jh/frOQcW3dUdew78c+2RPtKmt38BlCcZFvKdu3ufyUtawetgIl2A7\n/MwizAYheQXb1IrUBtasdRQ8Jld/6ASg/ZQ4/sk+BDoXNXbXqKIs8YQkxzkW\nM/iqbzeBl1c1/d/OYxUBFEzy54BMLW3IS7b8sHt1DIqt3gLF6FKXHCOoMCFS\nlyEi9nlsaVfCLTGOYE23Pghs4Htv4MOcqESrC4qxVrxlVzsxYKDFygZrD/3A\ny6VT\r\n=x9D5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqXj+RmY5f8VNyC4JVY/S6VA39UfRlo+s5i43FwD26+QIhAJiiHgjpeEyugAQFs31z8jt6TuRlphB7RlWHred6L36A"}]},"_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-fab_0.20.0-canary.4a5d4eeb.0_1605785444570_0.4606369070636116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.bd176a15.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.30c11bfc2.0","@material/elevation":"=9.0.0-canary.30c11bfc2.0","@material/fab":"=9.0.0-canary.30c11bfc2.0","@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-icon":"0.20.0-canary.bd176a15.0","@material/ripple":"=9.0.0-canary.30c11bfc2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+pgZlNLuy5yqYAMLtTY+ZfrldCHiSCnfowhmxG9yZcOn6B5Fu8jZ2ppMaYlPv+VHHde8mBLRDYJccG6I6ay/hA==","shasum":"14f029da6875b9931034784f8b95d1dc486acca8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.bd176a15.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMkCRA9TVsSAnZWagAA5CkP/RusqdQPbHnZv+M7ktcA\nwMgeZhVHdLEsgxD5unf/XtmMtAoVRfyBQCA7lLBr8qceUtpeOQuGHy4V3NsQ\nXDNsv9IJdjCUazpDov7JeVdRoRykUv3XM9uPeLvOQgjgoWvpBcKixAb74CqU\nznTQpkuYD91e1atj6B3dgWnrznx3Xpz9vj6Ly/u8bK0kxaFWJae5w1KugSei\nFfef1JlYgzr2i+nPDYS60bqgvMW8ddPrd7BWcb8/EgzRQVWhXD5aR72SnnOc\nm/RJsKtNNXUMUPP/L3xmp/+MtaHpFeS29ZU9ZcfBaV2ChBBy7C8v/RQDMiLE\np7Kmd4A+YPatKEaqcvurJ5R/GeuuCc22/Og4+g7PYRB91zsAD/jq+RtZxolB\nYPL9DOJdRIJuHTXJZ4vta/WVG6bnbDjsftZW0Iy5KWUgZEdaP7/oyR5PF6mk\nQUXJg8ii9FxHLmgRFsB2Yqq/sz5bfc5a++E+t+yzALLtkz/sxfdV1p74Hg3j\nZQJchNq6RS+2qevbq1O8pK8rwLVGrAb5JFBoPEzxgxLIck0zfyGVETnCtN7d\n57zLAwHN48jcyEESHpg0KWKOpSjtC69FbRidXI7qX4Y5OPuw66OxwxF8WL4c\n7pAnel1CwbVIwMmgL5433p4YNHOrgIB+YLoUVUMQsI0G0WgKEFXzuH3Ho8Iz\nEzbQ\r\n=LNBn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBRh4u0cQZbPb19uJpIxLWgEA2lUSnn0JD0wxm8sHkBOAiB6lIRl8qXfekUfFVsYRH4ERdXuci8tuV28tTMow3cDLg=="}]},"_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-fab_0.20.0-canary.bd176a15.0_1605813028022_0.9203036657510668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.e85aa60d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.c927a5d05.0","@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/fab":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-icon":"0.20.0-canary.e85aa60d.0","@material/ripple":"=9.0.0-canary.c927a5d05.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gl4Z7X8PVUQYLhJe/ylbF6CjyKziKDHTby+3H6jDoaJqe/a8mXwNTO6GOcwcJh+QrNI8Ok1a6BK9pie0eeUSyw==","shasum":"ae32dfc3dc9b521ac4e199aefdd63b30c1365a83","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.e85aa60d.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDaxCRA9TVsSAnZWagAA8bQP/1f2a6BdHghVrOJ5Vb4q\nQpdtM30yqkgx7fMJou3C1urwSV96Hhz8nqe200q/Y91NeMe9wA/ZN/3G+HmB\nO4HP0eoXhpQEu0/fCbKGdpHrvOQ8BoASGTA1oPYXhBStqvQv7p8PwA442AFs\n79CuJ2l+TlkeHxOEU99IoM/hsvAFCKZusCqWDMHcavGGCPbxW0Iz39K+/i/O\nEX99OGj5jG6c/4R9aTAVbRmb/YS2slLY3oiNHb4QrJrIm+5BYPgkCSfvvDO2\nU1S16wCr4jwUKQiVz5tdfdBt1N+rQJybJM9Cw8xEYvJMT1Rxby8KAAEcp97Q\nr2p7GlObM+0gDKVVVt3JkI8N0buHXwRfypGSaocNIRtCRiRaJfEN3eXo1+S2\neAZCkHolc6IDK4UQqLfUO1UuJs7E2YuiFt0q4iPN8uCePF/A+LV2/tYiaarZ\n7Qqq+t79+5hlW7C5+mE/cH50RywA/wbcMW2ljGvusx4ACU4lUNftDuwbNI35\n/WeeMCV4iYGN9++t05ZajIQYD5seAY6YLpZD5SgRXoEoZPOONCmHSbU85I85\nF9lVxnMwTe2pJZ+/fRqDISUujNh7fZd++9zIrLPI2+8sPn8WraYwU/SzDO8H\n2YivKkeaaZcUj5y0iS6fW8/N/WPKxPCWRGFOmT1vWCfHyr9A5rgMZ1byogDK\nkAmJ\r\n=kF7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnPWHWSiVZ/+IwAf6J0G6EbWsctVXGhhwhpLq4vd9EYAiBNid4NX9aatAAIX4j8M4dGU9bIsiUzJQAOwr/tbKIj9g=="}]},"_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-fab_0.20.0-canary.e85aa60d.0_1606170289343_0.0452052902531499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.72092360.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.c927a5d05.0","@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/fab":"=9.0.0-canary.c927a5d05.0","@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-icon":"0.20.0-canary.72092360.0","@material/ripple":"=9.0.0-canary.c927a5d05.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qAdMXYpYz1OfKK7UAG8a1gRuGNLw8iF2t1gGnlNHNBBM3LyDtyPCVV3JBfdkkmaE/QXSGu7qV7qtz/N0moIM4g==","shasum":"f576abada8388452eb5705def83ccbf349e0d064","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.72092360.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImJCRA9TVsSAnZWagAA/SIP/1QmtOS9Q2/R4y88ijeT\nHjmcxW96vmP8Z98/JnnDKVjZFid6yOhrfaox7Zdkce2gIhk0HdulRbmNli/0\npYUQc5e8SrwpdqeT0KPs3LCnEcbrJJaeho/QlI8Ik32q3VGxcJDI+YKG7fxl\nGDwMA673VDAh0IWT/VqBmZttkbiNY0+cws2ON6NlEp/FmxtsXyEZdi4GiPE7\nMrO4Vob725j0sUduBTa8oQj5oF4qjXrHj0qafOrA9xob6dMu17vjGwHoWksK\n8mmz7brdAx5zr/MSYpyffT9FkHe+Ohbldf8grmRhncIC/tIMiWh3XqpdWpoC\nm45WmIrZKqzeg0zrlCJbo1HPa4jgTAoURGmZQ/XAp5stwJQMCka/o7HWpWQY\n6ykqKQelPyFzlKgo3QuxCtihWxMmvYAYkyc7DsbwSmRF/gyAufFoRakgeVno\nN9sOoSL2srCuKpKxn5TeEtyhqtORgdPxxbMXTfZnRlAaabUVHy1Zi+jeXr92\n9FKjv9aokaSVbMuACO2vAlLi0wY62Q7EFmYS44tJNSlrDCA5J94PFRNK8gVU\n8ZMLS31tFAYq257coHTvARKyHC6loXFPwhsPqpsVM19yb5Yn2zL6rLcr8Alc\nEmNV/+zv5HvzJjbD0FmgnoqClj8wlCyT8SAen3DeT3DdjPq2RU93PZYGLy31\n9hU3\r\n=z5ju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3tKNEadfRPmJJl3va5qLoRlpyqmwvQZqCln8PQ9iT3QIgZI4MzcIhIoTyTLnUecfZXxGXle00tZIuU19w6RiAtOI="}]},"_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-fab_0.20.0-canary.72092360.0_1606191497020_0.4487763547133623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.baf9d39f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/fab":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-icon":"0.20.0-canary.baf9d39f.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mzzyGoqlV5doaF7a0ZnN3wpecxY/VAZ0spMuL6bI8k8AqtJ2btiNLaQ/N4ltu4th6Q4NKsrpJEZsKOnmmnwnCw==","shasum":"572dad82870ec0393fecd51879e5cfe5f6a9292c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.baf9d39f.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEqCRA9TVsSAnZWagAAEcAQAIpIkPZPr8KWfKGXTVZ9\nwEbzkpKXIIuhfIkaImHSUwTzJQH7Zk3ZMGX0A8RLCsQDuvhPBRwF5nxrCgDi\n5o3q/47WUbxAlmoMULaqYEODnOore6h4dltRdsKhSb1PYibIHh7EUXDczgGD\nE0zywRJ8A3FOwk49HvJ3QHUD9CL4lYwDxlm3MY0U+MPY2Z4t8O++IKkwptkS\nBZrp041LI8otc9HrQGO2hMEBTAkoU6HIxSd1snOOCPKOVCBYoSyTFjZ8gMVm\nzQxQGejVlxWgWQ0VRVzYRM6hcWNesrz77hO2fQg+eh4JsR7sMbpk0ysc5xbL\n39D27Z/duHgmufCkEFcOogCd6flDLvkWu+juqzgOitpVN1bygL9kcOWn8JJJ\nPNt+IvmikSBsmIq9VJJ+wrILRpYlsHiEKDme9Zo/IJCuVF27Ehjvfpj1L3Zm\ny8PyZ6rfAfL11NCj0AHFxifVfWnvrqOzrqZK95/8uQexWqIk6fiisekn158V\nIK2/JpoJjR/5nF0K1hXBEpCof+xgbZO+xES+E/ECyuXemMJnmJKWzYWyEqIT\nc5T7b5+mi0MxgWnB7f1U0AabEb1eBkPjji/ARSuiKw+Nfh5mbwPVNivW9xTq\nOHnFpFqt5F7w2OS95+Pev9pZsViBol8edEN+zH2cBr4VNXwN5ssEJs35fi/V\nxPab\r\n=u/6s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID33bCwkd62dy1JIH6bhnNfj4AlGEGaRbQjeyN/t7bZmAiEAkcfJGQseVhDfWoqLK/f7HNEqE7W5gETe814ALEAikSg="}]},"_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-fab_0.20.0-canary.baf9d39f.0_1606340906490_0.7685489086867405"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.51aab0ad.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/fab":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-icon":"0.20.0-canary.51aab0ad.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Oi7IuepYHiBsJYC367ROlNs9T3tNFum8JJo2rwLsrprC+FkipuoY72Dg2BE2S0LD4rGuPymtORPAQoU3ACyOMw==","shasum":"57ba196ec6ae0533a3e81a7866afc6df272e9b43","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.51aab0ad.0.tgz","fileCount":16,"unpackedSize":69410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbSCRA9TVsSAnZWagAA3hAP/2KN8ABl8kLQY4KG9ur2\nLtPDbG+m0nj39oal9l9UfVAzzCTYnIZXnoHWl2GL9tBxEgKj1VO447fA8nq/\nVcDdkFSFUa/+UQosJEchGaPvGl5uVipZ3T4rPJaAQF4D1iQ23VFsN0yK3fnj\ng+mGKEksEFZ7VsQgNjZl5Zo0i2ABTcPY9qrC1ux4BdQpNdNBviVm2DYO6p1V\n3Z9rKUdutv/erBQNkkt+77EkQwow8UHH4wKWUTxWYEWV7Qr7lmIgOtNxNveL\nzJYplXz9Lg2vmYksUsjPrjkgTmwJCBVDDxm2IONhwigbUMyETyNTbxlnIs2w\nCkgQSZsmcFePwUW2xNUIv5jiDREP3k17tl88+W5aYR0DhVzCvhbQrOdMB5Jh\nkmUhJMKzfJWb/kusIqujz+bsiAxTPTGOaqrzmxEpM6gpV8vqkvzy1m+zu6lE\n6wWEQycydPDi3B2GacRvfn5bLlHon3dyg+crDFPwwLMX/Oo005Bh87ynh5DH\n/+beYyHDytoQX3bRmZ9sscNy6A3S09BPqq2CuemVMtMtbhxLUbhKZLdy73RI\nfe4yeB8/fpPBeiFoSyYnATvKiat8CSCuzRONfdYeEF4LJQuwS/wefhUYiads\nvwRHnBfQoD5dXTsp5gXsptTVRSiS1sMw7EjISxkxEMXl2ys1njTxVs80HCEs\njqUo\r\n=oPBu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD79DPN3f2fffFODPIUCtD5tKcBGELbQMcG4p9khYjZugIgDXnuGc3rct/+9gQihVKqNGWDV/MziTq4NguE5Ssoi/M="}]},"_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-fab_0.20.0-canary.51aab0ad.0_1606784722460_0.7541657571461149"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.8fd4af5b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/fab":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-icon":"0.20.0-canary.8fd4af5b.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-JYxIm0l8kYXDqkr5aT7iiBLtD7rY4aAYb1pBJb8ago57QwkMK/sdLMn64H8MBXtbc2c5hzPKEIKYcyV+CoMYyw==","shasum":"ef6998df71c4c85421d6fa11bb8164b615402f15","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.8fd4af5b.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDlCRA9TVsSAnZWagAAnRcP/ii1vR3uIqqyhoJwUeVA\noykdaxgeYlTkMO2pdK4/ZIB0Aaz5xWHgcAe1dSbkoZMT2hGY8ezDUGpuN35R\nanXMcy3yReB0Bb8+ntiRKUZBvDKCgElznbKJPUzLb7sQRplxgwss7EyDHWba\n9PFguJGqx+BB3RHRhkJQzjThW4Cj+CQBsbh14Xk/5dVhFQRJ6v4nCEnR91WK\nueCCGnUETMheYajlNZkQhvUXEmDfLS/xFp6XI2PBO4jWCvZSROhilYJWtsIO\nF9pfEpoyIHYMvFfVsjiMvdOg/7bWURcpD/mSf+XkZS2y+Ag7Ju771ZoRWC4n\n7n1rWKZAaUI5quYpvwqgr3WgiB5ki818p6j4IKwxtlvlovEyGQ4GhZLKNNVn\nVVe9XHlGKwSqJj5R7uoLpAGZwJr1wlVzoj+qBWISamdj7E7qLh0zaN0lzOxx\n3LsKVxsqK7WV/fLNlLSK4eGeqYHh/hRIL9tTx2d2yr+koI9Tm2Jo+DTOr77F\nsy9gQTOvNMsNBo4S+AhnYH26NEEJ+oixQUkptMgV7lH9zm2FmDuwGHqYzHh1\nv5crITIhjacBjlDNVXx6zF4ozNq8ppDuOGiVS8keoZ95gsoMqZHGshUmQ9v4\nSdURqz/2Ld82P4hYeiPree4VXDmdG63fA6NGZdjv/sEpUIEOnCyyyucfrrxE\ntsx0\r\n=2Sbe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBLtsuD/tsutboUn80s0a2f5CgicHfi6QBEY8EDo12KAiBOmxbo9hmlujWdN3XN/b9bfaeZtjFU3wqfbmCpX4rTlQ=="}]},"_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-fab_0.20.0-canary.8fd4af5b.0_1606955237420_0.3134295535394267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.26d14d2f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/fab":"=9.0.0-canary.ae27b44b0.0","@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-icon":"0.20.0-canary.26d14d2f.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-II8LplRTqezMpFW7/EQ6LoelPpCh69EWErEnA/2xcuQ8WKhHBM26x5mkiFVjdoRII2YEZ5+Nw2ulRsDsKCFypA==","shasum":"c66b24ae686727e0b8b6b7da1cf62af90e2fa704","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.26d14d2f.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDecCRA9TVsSAnZWagAAqToP/1Z3a9VaOFHEFVTmy9W8\n0jutXw/vUDepy7aebUj7WD1tbIFemdgOC7ryQ1N4oloDLdqtSYtLVbmngb5/\nRi3kOoHfaxr2e96aOf+Lp4fvVb13iKXqbBfbEQq7TbxWqAELjEP5gtXd5L5z\nMTmAf05ght653F7fCZJ1Bpx4LbY9d1lLRafEz96wVp5v0lidrPZNP9I31Acj\nMAqdxXYQ4Wb+mqEcw5ntjH0mDqUnNwcazUBahvWCJX8Wkj/qipKRmodV7DOg\nPOu4zvfGGMiJRQe5FeY0//0zfnAOyKNVgAB1TFqgTpLwY3mbcATdKqr3QRyQ\njcFVCJs8dz1k85w26oVyV9CVlOKwwxKNx257+csL1vQ7w789t5ZLqNGjwaKW\nPrGbT8YTz01gkSbMREkHcen8zxalpZIU7UfQ75TXsccgl4lRGkj8QeHRfK9g\nJpPjVS75/Q5aSd3Pc5+QhFp8xucRN52vKYMnpLpDZMCJWxhkvGdlKXfaZ6DA\nTNxEEuuuuNQ5zlOhQPw7G1R7LEaVwh5Bd7qCBJe5cliv3yavPyuwn6IAlLJG\nWL0U5kIni7PgdwiVaHJPzZY40Eaxhc1KbGZ6Ngwx1fayDZZiOBKhWSYPu//J\nOFZ/FLKCSaQtu2hdz7dVt+K+NEOhGQ4vwbRN6bJm++PrSpSTP0V7OBahSPJS\nJyoI\r\n=mY9P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtzfmw9a/aN29EfgLxKMcEmlLQrido8EXMOY01FsZF2gIgLSLG0DLF8rq7/2qdHXdu4cL21N27t9O/z/+gzeEGDsU="}]},"_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-fab_0.20.0-canary.26d14d2f.0_1606956955661_0.7794328706762865"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.1663d7e4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/fab":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-icon":"0.20.0-canary.1663d7e4.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/ymfkmmnOIL/WN+LaZMrsART9Dr5jUz2xrtnrkJm05cLAJGWrjnbVlohFLLAhUohseJygKPV9jCogdGPotPhRA==","shasum":"b73ff1a5f9d2268c46a878cc5d788f4a4190e335","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.1663d7e4.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxwCRA9TVsSAnZWagAAaZgP/2VA2RWIZwNRriYz1ugD\nsTDQfbcVTG5wGoSw/xX/9QGo/zkaiOWoe2GkbCdiMrNqMKQMb2rse5y2WDUX\nUhuGe5nesc1yuFIEmjWvR7RLEN4AfcFj4zSjNSacS6lBZVeSrDgfv9v0kwtW\nYoW9fn5CtD7zRlCD933Zi5soTOWTLk+5pRPwjiguZXuChsmOT8206PeWOvcr\n19/Retbj39kYWTcFOi1EHPCoBADKsi0uUdhCp0GNdMxPb1efk89R91tkZ3ji\nTAkRoe//2MkpjQGMDY6IEOBNscmdzETsBpMpx4SdVLHf3SFt8+M8eXZJYS5t\n8wsnryztcISfdAYFjskvcFLVN7XlfdjJS3shHzzqjWaQbIsm5GLEghL4aobY\n4bq8Xuy95Nt8xcYk2sD69+anB//p8pBV1yHBdd6QONvDzoxWIbx6BuMcn1b5\nBZREhUwBe2CSTCUyQ1n7GXTgBTDLIOUVK2uVpbHU2OmEHDvEuBwyfOtNo8Rm\nWzW69QOCNa97EwklvtB6cMXcgahmAqRAYt3IftERtoPY85vDvu6R+up+pTEd\nNIzNdyVHzp0zXWhx0nE97bv1Wf6YtPv3LLoCRVEi9C0vJALFCoUY/F7QjptA\ng5IDmyQiGlPqUo4MHFbi055ZVRC7Qs5esrd4Ja3YamOfZXZA4XUnwBhmtCws\nrDxE\r\n=oC/b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEMFerb/Kd2DWTwSfC5go38GPax+bfgUrgQuTuVYpxQ/AiEAscxtakN2Be/8H4u3TljBujeJKAYmdVp90/RNvpD5kBk="}]},"_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-fab_0.20.0-canary.1663d7e4.0_1606958192315_0.9787129616603998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.cbe9fc12.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/fab":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-icon":"0.20.0-canary.cbe9fc12.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-y/dF7RA6rufuC0qJ/8jWvJwLCqJlUbNNMZcAgR8IYE9VclcMZkjdrJpkEwQ9gdT6LCEdRwKKs1lx04eNxCskNA==","shasum":"72e926dc5ef2815fd46bfd5f9bbff2414ffbad90","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.cbe9fc12.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdkCRA9TVsSAnZWagAAoN0P/RXpGtCDFxaUTVR9G69x\nlU14cYZ4M/KgAHdM5rqd37NC36ABGCOp5KZ4YibO/GLO6uM+PFPE2lSp5HP8\nnLnr9IiBIXpiCyOVadkEb8Ups3ueJwWRCl9cIiAExswcrLOGEzBKjFVZ0ca/\nyeUXk3BLFj5w436yJ5Kj0fVeDXdpdihHftvzVzYRHnb+T+pEYVs1AxxeqBHq\nxfld1Zn8YSBRPCRHObVoXnyr0/5qv5tcwtGSEReoYssuZc4FERz7JsnshEnD\n5eBtt6zXkFKEB6rFsoHfL+CWPVslLm7IukKqtp6eJKk5b/52ude5Q3iINhf4\nFzXHhkfTB90f3bcprKeNK+t9RB519TUu3rEqcQV2R0avjYRVqIyuJ4f5l9M4\nyroAyB72Fln25c/OZkZ+E8bPQmPP51HLwtwv+bVvSur92E5IkAYUR8SIn2ag\nZAvwJsH/IrWvjOdy501XoVGldh2jRJr514KBzaYZqQSBk2DV3HVlKYMlQLMf\nAJJjuxUqODWoo76/jRKKURdkQONiW7jTaLzRBfN/yqz+tbM69BzQnJw2Z5Kw\nhlg3sBC5y2o7+w7EXG4UM83kUWrbsZqs/0ioOK/6K+Ag4jDT3RsqHw5JhO52\npz2P3Sgrua0IrJKNZ/gJyvgOunwgIiGXFhXclkBWmiCiZxz9Njc2gkCPldGL\nJEVm\r\n=bhE6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAsscHxy8BWPkNf6BmdgYYbRfF+nYSMmYNOGMrarrA1zAiA7LQtJFGvX6Q4En4KSM12Y1rBev3Jq6aiv+4ABZ1SE2g=="}]},"_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-fab_0.20.0-canary.cbe9fc12.0_1607022436212_0.41926246536479206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.9755be10.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/fab":"=9.0.0-canary.11da3c0db.0","@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-icon":"0.20.0-canary.9755be10.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kmWwXDcbW4wfYdOZ7IXafyjN7k2yeYOHKXt/+v/NXnOus1+9sbBWuAW73WHB1IoikarQ3V4GWQ7GoGyakbQeFw==","shasum":"0c0682002dc0d0c7c7a1fcf2bb1e1d9538e77b51","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.9755be10.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTukCRA9TVsSAnZWagAAoUcP/0jLYceRqD1fNi8uktTO\neCmF4GWmTz4odTWpPO9B2u9UqDc+bKxR61u4bbxYAqcl9/GSrP5ZunUGstGB\ni9SdsT1y4wiMvI5ZJCHaIsk6AfoybKgUcqZC6QH6onNRuCCT7VpBHH7qnUjv\nOLgeokIBhdAsUoPYqpb5P+4ulhAqjRKvg6DzC7X/fBZ3LHhRNd8HZQKkSYAd\nMyEmsOzLd9UyxGnGxtC9JkYfSZ9f76FYMENAZAdnqGiO9BmoT4H8Yy5pwOdw\ni9aluD4+9aj1s3LJJqJ6dI/qxx3VG0TOU1y3n3Uum8vnicZ1jyMjZL64yWQs\nHvNq96o7LENycWJLBhpGQkiIor5pgBD2BwOh9pYb2qhfUmev4ZaPmGRReoxp\n7oydaeBJddeER1jIDI5n9rqvo6JYmZNQ+tDdfsAGAyITE4WXM2PNLpeed3Lw\nqEITU6myLD/QjK8rnd/hwYb8in8OX2DMojDD8dlw3Cz5t3xuhzib/TyzuwmN\nn5oEIEkpnylc3jrRVy7MU/clZpWXQ+Y6KxOZUYi3gz2INvHcJo8He20YwObr\nbVGk+SG4bQ46o4YPhF5oSt8iuW32kjVjGl5QzYNvN+05wjYYDQ53a/b1+uFO\ndZCOxdT6X9kl4q/3X9VpmNuWIkCRCyszfXTydWA0ekHnhCvP0NbUMx3LUscz\nZFPz\r\n=Pk+q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqIsfflbLeIOWYWNVFh1nMelu6RchbK1OP91vxFLlPCAiEA7QdqfSLGXsGcExpJmjJfQDHN6k469AJfLglaVnfZmlk="}]},"_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-fab_0.20.0-canary.9755be10.0_1607023523710_0.6449312212482166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-fab","version":"0.20.0-canary.3f64270c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/fab":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-icon":"0.20.0-canary.3f64270c.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WZymiwMNYn5XKbYhdisG8aPjPoIz9u1Um4HECayxcNHc1xJkI5CN2LW06iHEB+6LZ5BSzN8k4/BqUzQ30TMdQA==","shasum":"9baee6f1e0fff91a07b10105434214ef1760c8c4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0-canary.3f64270c.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2BCRA9TVsSAnZWagAACGoP/iBVw5WxxnwaZKG/xQb9\nE6zIinci3xG0eNzR0+BM63M3jizxJaT+/FRY/FY65ddq3harPunWcfiT+XzF\nTJQcq0WLpEK0roKWFT3YGyIkqRCbHdyNvfMEj9MkHC7bLlHuNxC7uFOllG8P\ng8O8ybAZvKLztmxDtIqaa4xzUSBTKsRqRrMxxYxNQ6s+emRPx0SjPbE7COLY\nGBYcOf5Lu9IcP9X8KJVODhGF7yZj+mz8iR6I8jQqN0t3GwrQJnrs0q9WTkfq\nGd6Vvf0hiE7RYJs6ohoCoNytjkB9kKgWXqa2evqBSuUJYydb5L3CBihUu7qO\n5QGzHZn8sK+7V1gHxpqPVIhYQoWH5uvVGjJef3mCZksvt0BIuGwth9nRCIbB\n0qCnRivxKpnCmPmiQcynPKw5FnDN8Nd1ALC2pVdhfx+f/oLMt36kYWDh4TdJ\nYApwabNEanI9QRjZ68IGn/tl9DlIJZ99Iw6tp8zogflQviNUN0kg0VJxPPnV\nQKr5JwED/butWURkC/rMEazqwhHpHbJ4mUnmoTJ08mOKBo5oMO8f/9vweLaa\nFWb5AGtniXFESnJCStFH8H/tmwoM3jNYLKuQLqxNGjjLSabgyocpTrnvNg6G\naKy4mjGA1VHosLhAcxqUD9b6xHvBr1Y7HMqHdKDSDqEA0/wiF97NFZTNyhGj\niPL5\r\n=307g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+66/zfQSn/E3vLsR0u2VnbiVqXgwc11k/lR0voezemgIhAIPi9g5EFnR3jpxNsbk+/tHK6iWobBdMdz14KAi1nYjg"}]},"_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-fab_0.20.0-canary.3f64270c.0_1607032192686_0.5861558668493347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.d893b14a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/fab":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-icon":"0.21.0-canary.d893b14a.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-btmpIXKDt2Hj1QuD1V1LmyhG1dF5ZkC0mEATx1sPz+UwOZquCO04wMEE2GRic1o2TjClWcfmJsk9v80XIc0Wqw==","shasum":"2c2729470e23ad3bf396c98704f868e45605b987","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.d893b14a.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWX/CRA9TVsSAnZWagAAGToP/iAPW3Daf83b3K0p8bu2\nIDb+sCBejO+dPRRbfa8JJpwYtLc3KVtuBJooJUR9DBm30n72qg04AguVGhI9\nnmfQATsR/AcVTfo2A0rnaBP6WJHaAvdOrOCdBprvGUpPx2WEB88MpvnQ9eGt\niubk+xAF2dljCR+E7oIh5kJx6qG9wJ+goIwrATwtsvased50hGi7DZCAJD1y\nvH3ErEEP0i3BIiL+911FTEYRQr8/pP7yWCXKFcTR0R80QKQAHWoun/4Xxg4m\n7KqbnVnW93I0O5uo04FjCih3TBhxWrr9BUwLwhLlPLcgpHb85p94FveuRZ8U\nJ1c+uKIGv7fLbGLHS+sjyNLMne1yAYyZwcl3m4atJfTR3uWyMDQrUlV3aqCB\nvUHItI95Sz3r/IchDhkEb1l347mLzgG17xXu9Mt8kFE1fOyKBmkDz6s8d5Nd\nFwpQOhMyEhy849fCIA1reXitppcUFoSdJfcAWzs7P1QJXY1CrD/0yS7ghfb1\nWWHu/A4JDByF8PWk/72IJHx+6bBHuEJam0tGOY3SzaPmA/fB3tY1GseDICv/\n9H6yQfLcAxOdNR50cMxRvXME0rMebo0HtO1MqNncbrLw7vD2qgF7i7iziJuR\nLN9wkcnJQBcTy5ZloUYs3s9st3yklUAl04Kr3BWRxsqSBcwxnUWNgIHctLn0\nIukq\r\n=6vHn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVdX+1D5/YJJ3CVM9Ydp7/YZDFPWlGqZSzjtQzxGIbCQIgEOGfe3JkCvwiTQp0L8cr3Q0GHassfeeBXfD8Q/PsFs8="}]},"_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-fab_0.21.0-canary.d893b14a.0_1607034367285_0.6682229441848802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-fab","version":"0.20.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/fab":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"^0.20.0","@material/mwc-icon":"^0.20.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=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-fab@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-lxPlber5SxRAzH063IFTQhUj7YRuoi5juvYsSWHDLZUqj7wBTV+m6wX9a14wltcCumMNL80k2lXs9FLUOnZz9Q==","shasum":"bcd77bd9a6e06855b174944f0267e2b5512fab45","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.20.0.tgz","fileCount":16,"unpackedSize":69349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWakCRA9TVsSAnZWagAA1CoP/1yc+Htu8gumKnjRTg5h\nlS0xPLEdcLsLPCL+lpM9FPyvquWO9F10NyOUygPBhlKF3fZEFhvtpfTU/nzf\nB9wtNaaHL1+5fD8KJSUNzgX+UcQBhbVsrvyMLs7QhxG/QeJOahoI6dDUPx3U\nMxbuRd801Ceok3uGjxAfigGk9Plz+tAE5mk+mJE4PwDqjK71yFjhKhdRRxLS\nsxZwVsc1rkNEgRiIGgC1zVFndF7Nbhh5RC6Gayv0RrwDYOY129zX0bCQmpMF\nvGi90CvVo8N4Tjebgs+DQUNriRd6keUy2Kqn76KIswINklrwLpeCtWVCgqzG\nfc7FxfrIrU5gSu8CByY+o4qCp0C/SNhpdLwxVwk4LwHOBJLpoUER8/wEKAA8\nlln9wRx3JQMX5G8rTgeZBGhv8kItxp5n+ClLDV1x/8Nc3+Yp8qJoE+CUc1hB\no0mg9fzph2ge9RVB/JhAdZufsT9cEMHMdnsDiHjN91DzLVIpFArM2+u1JnJr\nfQhN9NABTl3T3/77RT9QY7toO+HKfhAZOUD7wdfoziAoBy17qKHaQR7yL/d0\n7lqa1nrL7vvNkfhrryhct5pj2GzfcncuGBUVi7FSV5/TOJFuK+feKCIXQccO\ncqNPoYPdjbGWjkqLXphs29i7cQ5wkYlBl4mPrBBm5UKH+0kJYbxibXwMeU8a\n11KO\r\n=sVzy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuUeBK/aYo4ZmUfQfoP+kG5yrlKJ161S7xH4o/JUwYBAIgf9UPwjw3oWhmooO75ec8RYoo6NvMCuq8OCgvBHC3kz0="}]},"_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-fab_0.20.0_1607034531730_0.90716183897858"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.47c7d7e5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/fab":"=9.0.0-canary.1c156d69d.0","@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-icon":"0.21.0-canary.47c7d7e5.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wrlhBuUKjRst59OLn9OkVcUuSG9AZONkGu6YASvm0s48Jlc6FNOMU7VPg0ko3Nj8/X/vYFxkJ8YQ+j4hCIMD/g==","shasum":"47f378db421edb5d8f974d449a8d40e34b13279e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.47c7d7e5.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088JCRA9TVsSAnZWagAA8ocQAKP8JTRng1nh9zpAUDgh\nsPJ7z50HAbJiMPS/rVdQxeckKKGxVwWl5H1+etEa4zPk7saHe5dR9iHLF4IM\nC9YpbfwGMQg+FHUEah42AecnqPLCdF+FfDhek4hEiMdwKKf5eZvxGfH3Uf6V\nhWNnnlYgqrywDXe3vABSi1IKiHyIemTUzHJ0ZE7eJJLYxQrdVlNnprgVFYC2\nIO4RRo+M5lTI20KkQ6zRzEc006Wa3dBD+Gj5RsaCw12up9LmtUlb48SwqQ+x\npoA0u4VJy/429HF/lYz9dkkyWWT2uuFUahjXKTWyPOHAGxcM2sDbvD+C2zqX\nrK0ecXXS6bL2JHvh1hVAoGob11fG0QS1KnWk6UOvsc9UI84J5tevTjoUQ18e\nFV0mfTpc4V/DWz0Ko+xthBuBVNFBy7GSvu5N9DzYvdwIaQRS9D3czcDGdjec\n67KsSzi5lRZ+YupShhmikgvk9J2Qj5zmqWdur3E8nwrgJRb3JrBR8gAFF5FT\ngVKqSFWUY9x85NHps9sjt/eTnQI8rCPl03COH80q8YfACKyLQ7Yoi+hDAe6r\nrY5+K7Wkc8jDPA2oPtV+Mxxev1Rs9I8GqgXsKEV3P6L3hF3b7bxJ/F+OTwyb\nbgrtxguZAQjeEqg3MEoUEFnsE6nMgGGTkXPxM2hVGBjw2eiyglor3HgiNaFt\nU6GD\r\n=7shx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLeHJMa8P3aITaW6XLTSOInfTQ7qPtREcVnrQY31okiwIhALpTY17Y6aKv7YIofN5hINtke7op6/Y7JkkaUL+1A4dz"}]},"_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-fab_0.21.0-canary.47c7d7e5.0_1607716616862_0.28866105099326544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.b304a78b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.9244508bd.0","@material/elevation":"=9.0.0-canary.9244508bd.0","@material/fab":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-icon":"0.21.0-canary.b304a78b.0","@material/ripple":"=9.0.0-canary.9244508bd.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-on/ebycCNpSYgl6nV53kTpJ7UWYPVc3LMYpXN2+kzvHqhgwD9bYD5RRxxyrnlvk1VLRFs8qFLWn2rfg6M0UIDg==","shasum":"72e942580425bdf5dd689d6ba9feec3c1b2be263","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.b304a78b.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2Ra4CRA9TVsSAnZWagAACg4P/R4V7VZYolirx+QeaIl6\nBNF12ZkFnhK/EOUuwqWVGn4xB/dnkExUi4H7aD2x9k4R9Z7M7nPUR7i3i19H\nEmGjnNdXHZAYxIvEWAPoUjVT2cS1YPGLvNWWh2zKACyHFIqF7L9Uxkjg1+8E\nVpEUeY4r2JdxWaGkUXinYYCpeSqAa1dr0whumFuglcbSivH3krOyvUilchw1\nvfIi2C7QHpKCEHOoXeZ4tN8QdufHKDtDm5Gi/nPj0jv8QMvem5lKB7C2uU4E\nO6I0feSV8/FiQU0KYZACXhyH/sM7ylSbb1C7Fcsqweqr3XSYYzLUmQv/b5WU\noQCOO2ks/+L+uOwHOkk/M2gbAhANHd0PeXWx7bVJsWKJQeR2a72X26/G0pkC\nf7vYZIjwy2MZ3o80psP8SjZcio+IaQEOzI5PV3LZie7qGE8tvBpk5O56Ilnq\ndyJVrk+cfEaJeWIKffib/EGD5fhJByIJFmjz7AQrFecXymkPSRvBt21Y3u9E\nEjorRD8tLeAWmmU4ng06Ylo4e1FaxfxsTeBUmy0JGdAaNq7gfZcRDLxUxVEC\nSz45SB6/ewa+kwTP7T4UdBwDIsGVMSqmjc5tGU2JTw+/Gzoqk8T/9zTPinoB\n6YczB39mQYSgrQFI/4jNTiIU8xgEgnuKJi1zZj0er03AalbeCTGTTnvynQUN\ngcmv\r\n=thO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7Cy2xdmb8UP/LNNnm06jDR9NW1lOp0Im8oZiXp57t2AIgaeKd7SFQ82Oz9huK5iBlFnedb6xx3ijuwe0spsYS2o4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.b304a78b.0_1608062647601_0.04796513279453141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.777c5fa4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.9244508bd.0","@material/elevation":"=9.0.0-canary.9244508bd.0","@material/fab":"=9.0.0-canary.9244508bd.0","@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-icon":"0.21.0-canary.777c5fa4.0","@material/ripple":"=9.0.0-canary.9244508bd.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NNUPnYHPCVXSUdigoTpoqKJoFShpTHXJZPrrfNgmj13t/eNWcxZgCjAUcYMUOp0Zpoj+muZRHqD3pEfzlN4fOg==","shasum":"6cb53d318b016729f12d99ae3f92e20bed0a8063","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.777c5fa4.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oH7CRA9TVsSAnZWagAAlSgP/i/C+OpANB6wzgrduYQt\nzBcEANLnvxdqJOaILosS1d2b4rMIrznRMiD/MdSjwMY27Z8athhLNs0IfwbW\nKwkYbOszbmAZnKn4geLnMNFfPUhJPAzpY4d5M1Hco5KS7KkC53hXhwJRBFAU\n+SvmjnHqtTmU1CwkHy6JnrXPfQtXwxioWmWd98bxJluO4Z4ZHL6m//Y843e6\ncXSqg54VowtTHLom8VRhuGzlYCLiE2yRGuEEpEq64p2LCFt4/nb9kbqvPT+p\nZJ4sNj2owsdj8WC6YEMZagoD+OYNJb6FRUpRymubAK+2vqCsqTmLDSFR1/UN\nobAEkJafRTYgJ2PAsmvJCdC66u4uyBQB03+AzwPmuxmVco3CWzcYfCaKp0sh\nh6+bu5iOW8siEBty2CActfamz7CvZuFbmBF5roc+RDWU+yUI4x5R7oCUTiRd\nCceKq0JE4urJQfXxI4y/AfkFX5L5t8AGyhiD+YRssGDjPVe/gU+4b4TU3/fn\nZpn6UzXNhg55UPTmN9jDejtlqCyKeQqJ6u5TRR0W7T98A2tWNNAq4UjEGnDO\nILD74k2fEqm97n9ZLo9RkhlwU8C5WaS3Sa0oDVGjEw+F8ospC+De5FqxuBPi\ncp5HAeYWrRks77jKearp+piSMBLQnCNKfxV3uZy+kogyRXEC9HiujkxzWBn8\nLIJ/\r\n=+0pF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoe/NzM2VQ7Ui8LkcLlBGQXmN6K+axZyIncNMXrdTqMAIhAKzPiCgp6Yy3XYQ94uX7B+HHdaFxetQQ+ROHZN3dvH5R"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.777c5fa4.0_1608155643419_0.7645591853173164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.635c7996.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/fab":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-icon":"0.21.0-canary.635c7996.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2QPLZRRA32+saHhVuRnNBH3s0Yd0Mu9cArBevgHYsMurMO/4DiZr7kPGNBGC1hBXra3FqNjxDoUjBTCEtSMIAw==","shasum":"79172ca116f095b368637d78b4843866f7b5815a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.635c7996.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+prCRA9TVsSAnZWagAAWMoP/3Jx9ZiBuadxt6D/SuE7\nwEtc8cgMq046CfcQdDqafc9vMF386jvBLgNYc2nQKA5jfAFA+K8hzctwbIJk\n7sjrJyOrXDPLWjZoO6ZSZSBeEe6jY4eh212N3vpbeIlZTkWc8Fn0iON1p/5V\nIK4JLDVR4pdP1Veicsowp96OwXHOiDFif/ohg3IGy0gPHsxjXHqaJqUyIn+E\nwkZO07e7QnkK9F2VECZPd2VZBFh9p3sDlphdsnaY2j6x+dXCwpD35BhAZU+v\nSakkxdjOCDL0aY3x5r6H34IDOEX94k2Dmj9szlvYtGAwNeB/bZQTKkCQODNe\nUaXCQpoyFOm/e51f3Jmndsk0cgXFjUvRGqdoYu/u1D/lW+Yue9Lpo/OMhoI3\nupfUyNZpJqIvwoX8SwYeGhaTIPDMnPAr4oaQt+Lp1g1cmowCjMQK/k6NSm2F\nn84a33IvV1KXhljYkTdhN6O/M9iNRXIzbVCdsCerBCNKhSS2PBaeLRT1/poG\nF56FeBak0e+PsAyCLIE8MASrYsB8aKHK/L1w0o1YqI2QDrnX+3QQ4+qyHMej\nN41SeD16JYaCBOcsnlccDWxF81UnWXuJ6lFd9vOnjvzUJHToG+v3O2ESPaUO\nagKUqrXAMvVGCXL2+wJ2wrrWxQwS3kLu8POL8zZEVFLnjlPAVtrCo/ocAmfA\nmPm4\r\n=la9S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwcxQ6JV/wMzVfE/l0LDc9CoCGDc2NR8B/bHGKmen/9AiAknAHY2wPuoAAV+XuFaIgBl13cJmxsbg5ZrKb0SFwF7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.635c7996.0_1608247914550_0.5863176017346483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.20b0045f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/fab":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-icon":"0.21.0-canary.20b0045f.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BNdTYgkGTPoXVM564xewKlOR+YbziyPKpTsdrbC3jOkAY4WKGeJp4zdhJtAQkd4Tsd5xb8pNb84UIyG/W/LGzA==","shasum":"d0709109ebc7ec048129f38b8d4b4fb4661f55a5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.20b0045f.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5qCRA9TVsSAnZWagAAh8EP/jt3C+76LbLCKfqpWQ16\nrAEEm8nGZJjYkRCyn7TxgZH+BbPWpxznh6S75SQ7Okn/1oBy165AiwOe/mTG\ngryRtigWGwCS5+TSqGzjd4KvwvLOYCM9oymi3pOICwkWyvjPeMXd1vrrIzR1\nuziNpG4fPCnFDQwaaF/HOLw8/IYrja5Z3pLOohUP4qH0nYca0PI7nfvjYdz9\nVoCSTVWqvKZ3M/hbweZbBbvB1/91FdOVnhnCQW4obMwoec4eVFrPw7VzJD4m\nr13XKYLUZgv6cYMZs3TDVM8MXUDUEXpk0f7h0LCAzi7jjsjIzOkE3Ya7Ug4a\ndvcAjFabhrwJw5xss+L0tJ16qdBuggCAiB9wKZe9TQ5yvYgA3gaDuBIPo7ji\n7nuP/GcrMlU68d/CqJizbdlfWqUun/eHKiuu+Mg4NLr+IqUOY6WN0P/N6AbK\nQE7ZhioMariNg6ZfbyUG/8E1KTmBkTS/hK0F9daeVEwDNQjvjH6zVI6eqJ60\nPAPxfTmM+Y/oaVq+WOL+M8A4akJuaw3jzbiPZQBPtXSwwzJMD0pP1kK2Okrc\nZOGD6lex0pnvtEjgjACsgGaH7KFOsDruuHZNOQa5otwdEo1YfZCWxCt3kUdP\nzZ5QTjqzVkWZKQPdxbQjg03EFDP3h/W4X0h1U7wRYUL8DyUyWL6TjWraKDpd\nFCTS\r\n=Srj+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1PPY84uitn9IcG5VBMcawCyrWGkxHEHLfRAWtd9OqVAiBjKeAE9ETqu1YnD9/vodDlyXbTcsRCmSzl775WxPfA7Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.20b0045f.0_1608248938393_0.7771336384409404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.41f77000.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/fab":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-icon":"0.21.0-canary.41f77000.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-soVrr0jccwEOIruH9+0k4jaWzshLosWq2+JNj+hG5PyyRE/9oDy2wWkrA4LZpgba4VVZEkqLvwAtmT9jwfCpmA==","shasum":"8df29ec3d2e95a12ae6590d7511814d56b79a5fc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.41f77000.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lCCRA9TVsSAnZWagAAyI0QAJb4cNmtvUGMs5kzAOgr\nrERsHxo5a09oHaThnX/22vcbtGAAT206V46uY5in4e+TBerr+Tai9VoRnEPh\n3ZAUfZu3xug2G/D5zWFBjXX4R220CLjNc7vF0RDUYAtwbLN1+yea/8d9oJBs\nF3i6NALQrBWyPyS6QdJyZ+/CdQvLLHG4wu01Zbw4RMLM1uo0yUkmQlbUzUqr\nSdNf8UNRYwhlw6NYINQ1A1roTpDPuZdFxIVTdkFjSxmwSWU1Q9SUt++S01gu\nYPh9uk9mpk/avsb19K+Rw56B5s6dXxm3QHdgb9NIpU4G2Hr8m/3XFvhYcSU7\n7p5K26BSD8rUw4DNytBEHBqWXVyPxvYlXOk/zqtzuln0z426KqHY06j3Lu1l\ndYjw/2OMsSAi1ROTok3HL8WKs3/X99V//57ve9Z7geu809iihyohn4RSb184\nhsRIJRmm3ClQxqlRnRS3zc7nb3LM0GQdrgEs34CeySCqVOs/4+uAgXFL2b4/\n7JsbbsmAwa2SR3n9sZJtiI6sQYDNWRUH6gDJ0xZxLX1kvxWHn37fDLM/UJgZ\neV3bwnvAq8jQtHh12P/sZ6j9Sev7lajSAWnmM1T5lCGDZaChfnzZqF4d7YKm\n2gReAihwSlmqXuJMzUWMCgM+cK3Znxtz3+ipv5JIzgtl2fTK2/6XV5/y+DpO\nSIi8\r\n=SmgF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdnWa8C3ui4d/QI3haZCW/eSePKomL6+M8Wo32vuQAWAIgeNzHsm6IU5nRWaGbOVhsFdAFXWBoapZvt9BuKULi13o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.41f77000.0_1608251714494_0.2028959365175924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.afe4079a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/fab":"=9.0.0-canary.30fdfd06e.0","@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-icon":"0.21.0-canary.afe4079a.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-i+H+WbUeyJQE9GxEwPMd1yiZodg70dlyiikJHNtfL6Vmp9H1DC+JRV1r/HezHSgttv1AMPX1EMFMMR+/RFjuOg==","shasum":"494fff5c66f810122d58ba72e4e19ef3da800787","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.afe4079a.0.tgz","fileCount":16,"unpackedSize":69418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9iCRA9TVsSAnZWagAAzREP/juY7KiwLtdxwkEPP46V\nc/573keJESMo6oKNT7pZw1oeQukh56WfEmyomWPqc7L3auc05eNChW9R9G2C\nLgPLrha6UAKVNXSnMkkWfzP6VnjY40oF6MPuoT36EAaAOlHrhcDIe9/5P1kx\nP5ONG1kdiUWdB6nn1ShTQQi7cp6pbCVnnUoZ8+y8SPawmjt2EGWbBsMxoNlh\nz0WCl17ncd01X2gEkv1Q0Kok0LkUIVY0DqFqUkEqVvhk2RKPQjA5LdKig/3g\nkZ9cVpRNOHNj9Sp42+aMKS8DRLUFNgew2minOt2Wa9dURizkMtb9XyWZaQ+B\nw9y4R9aOzIDFa/OJCSJaWlXD++umZn4xGM/WTTNfUNYPyP5pKQYa2KC76sGC\n2tz96aUMhHuqDuV73owa8oaMFPLeR9hzHo4qycksjsdnccCeG5MjyBhQIK3o\nBTW/c66zPPf0MR/gBTHmu99K4ThvqfRS+JJzRSkKlePXRz93TllAQeKgjPH3\n8Xm/T/GdEvEQdpj+Qx4Wgom7+D+8CkFtu/mf1tYZaWMkojTDw7H33IGiorfq\nwswkpm7LpG+aylBvaycD3fReKHV0Q2aa5p8bW7m2IiYvpJkgblALo6qH6RgO\nX2ZWVkO4zvjDS9vhCNMsPiHGa3k4cKmaigImTrsDZMOx8Lcy3xGdgItkKhw1\nKYhS\r\n=9Tyy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Uoub2K8V92T8LJNcQtRN39mkp4Uw0bT3LAbQtx2clQIhAMwun4JyZMBmMKjySfXO94PwRFK2JNeokjCUsU+w6lXz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.afe4079a.0_1608658786382_0.598960521364903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.407ef8f9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.671d72d95.0","@material/elevation":"=10.0.0-canary.671d72d95.0","@material/fab":"=10.0.0-canary.671d72d95.0","@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-icon":"0.21.0-canary.407ef8f9.0","@material/ripple":"=10.0.0-canary.671d72d95.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9y4SuR4Jyga4HmJPlBnMBWR5KHbqNEVGfMqOE4hqtanpZmVWxkKZIBiBxs05xNZ0M0TjiTo0qFZW7eEbjx7r0Q==","shasum":"605114363da4be337a42e1215318930bc30bd086","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.407ef8f9.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcWCRA9TVsSAnZWagAAP8MP/iM+J44tD/dwtiGBCeWO\nrV+qEgQvFOHboz5giEP6SsgVDUGRWrhNOE1tINi2nl55svdCyvTmF9I+eCBH\npnl/QKfFTToY9PGBpuasvNy7XNUwmau3DQBsFNEbSnvyeFCFltlkeEqZ5qL7\n9t+gbFrkXLF40ERtbhZmjnR9Chr0dLRn61YIr1hdF9XeJaZxw8FTbbbUS3mc\nuRKwusisJwXPyxwmY1YSRhs0jiWAUCJrmc2zB5px3WP8omVrVkerd6udE1Ln\na/P05YF1LH7SrTbP/6Ze9jQt1WQp/c+7kfQwp3AYuhhspUH/wIC2ySg31FI9\nmYDo12JdzzJlUOHkyHqmAiHKgcD92SZBhILsVfrXmSYFRI7AsRRRgNartdH7\nawYiY8odoFwTyTihRmFZdjwyN5rNVWAmOSvGoEdiQudjoXmywej6EBsxuX57\niJ0QtyiKZbDwWK2Nrxo5ipsuSkDkIqESFFgadRCOuHdbvlVUsiUGxcCkclQX\ng5LgX5AoVfa2baMxBvidK3Ry/FJC7NMGAqHBG6w3kEhmW0lF3zvprHvczZAO\ncBFGVwC9gXXrF7Gv8pdnHE9dyFWtPnpPPQSg+9uY/rEMgHlMbpUR3rVdTCjr\n7C1BL2ZrkrooQNIiMD3LCMYgiCAkBzRS5K9SG5t0IQNXXp++1VrJlnypDJsF\nv789\r\n=BiUy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcS09ZB2jPuLBMX2nz+uR6ewubanXiQ9eQsEiWVhgONAiEA+dMctKIXrFM0Fe9dwDYHkSFT/MVn/2JRarhk8aOzaqQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.407ef8f9.0_1609369365825_0.03829313771253817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.2e26e137.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.365c69360.0","@material/elevation":"=10.0.0-canary.365c69360.0","@material/fab":"=10.0.0-canary.365c69360.0","@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-icon":"0.21.0-canary.2e26e137.0","@material/ripple":"=10.0.0-canary.365c69360.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GXWWOK/ewrLskkOokwZuC5/YTUIkGtFmlnSOEXLesqzcYKU9CVeeT35jEKhE4fCMpBGYhg436j9SJQjXD4fUxw==","shasum":"f947391cd5fecf68eccd9208477503e4c6346a92","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.2e26e137.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTGCRA9TVsSAnZWagAAfJ4P/3fv9t+b5ZHrvYS5ziqt\nMLjPZjUFcIorqUskUZDj0conLNr837/qcE5azIcHtSsty9DUongmSlD6U4RX\nyexLMWU88jG8MHRmMTqyi4dYhsJd3Bi2ARyApJBx32gdE+RLzOH1ru18t57+\n1kICt81tCUfLNiH1nlpSL3R66eV1W7EGpQd+guDN7asCTeccNjA9Ie7O4Dd6\n6z0gERAXAYltrFjyRHzjK7MDu2+XD/lxLqg1Z8b89fQCSL67ArKdWQgcychI\nEr2yVS5QJDfs6G5ldBMP5+fn7uem08U/T0BuUEcG6zTR3KnDLhSHkat4gcA8\nom0JaLd0zjYPpdQkgGjhdwGqlnwrrIFIdOJvjpKwmjPM+o8udIdJNUf/Pf3X\nksJ4uxkH9djerQhk85SUS8s01pN7YzRh6h3VZ9FpY9JY3WWZ/4rlp4qfBvEW\nb0hFnDO3etB/R0GEvxLvD8q+RYKAekO2x6pO5OFMECVpPBO/6D4GbgHu5nEc\n/i03aH4TpoE20r8zFQzRzZH9qfieHnrEiN0kDd3R3kZ4/21p/L/erLoscgZY\n5VUir42exzKis6P2/AaNg22L8s4FB755VvZMqAJas3ehnCS439szp/dfBKMF\nAPaf6tXgAd3ORiR78C1nK8y/jg+zBeZLXVTnlduIU5jMDo2yzRFgf8IzREKf\nOKbp\r\n=MBnJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuvhl7K+mAmGgTGodMpKV3T7cRJhcEw+QjMg/lrv5rCQIgC596+UICm4zG6FIeZ6hW9mL5uWwp0FCXqIrPZZXBgnk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.2e26e137.0_1609872581689_0.415567003557914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.9009f6c1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.abdd10065.0","@material/elevation":"=10.0.0-canary.abdd10065.0","@material/fab":"=10.0.0-canary.abdd10065.0","@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-icon":"0.21.0-canary.9009f6c1.0","@material/ripple":"=10.0.0-canary.abdd10065.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-53gGysB8iKeHd0a7ATq5tIsvRKgu7e66KhzlFpNuXqTJM/96Da43cGiI/61hKk/noVZaa0fJ0dnfOQ+nIIiIWw==","shasum":"6b4b2b1f9b69888373bb46e0510525a5378acfdb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.9009f6c1.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhtCRA9TVsSAnZWagAA9CQQAJQFjQ+EmhNx8BaeXkmh\nIrXEe1nYoqbxL2I6Xb3wiS+t4KXcE8AMjL6lAqT6AvS7EnYBD7xFEC74+gHx\ntCGzlrILsuMS1PFovNvrr6sO/MO+UKUOPcjBvFH1vAWMHu9/gGg7hpVr2zqG\ncqzHp6a+zJHfLe070tNo+VEt2DrkcF9Q1SPjVjQgiPNwNiZwNg+gvCV3J7Mw\ndqY+lBIqPJbC+72W4qVih0e/t8imCTTeFavfYGlV6IY7bPTNENY2JK091W4J\ncWfJHC/pTUCzvYhKewaCGDa3r7cduCW+PMXkhuVuF+H2W3eHeDQMRAezDhjm\nyexRWHzzeYZwaU0QsfGHAvcs3k5idDRoCrmIgN9kEjE6S06cqmkwn2Q7yFgb\nbXr7dJqDmeDLyomIHXygwalIKWKh2LqRVyAQdfrBjgSTrMelCMacSc/rokCn\nW5nUqf95PpfLYTS199x1VxuQNeSCu7D4rs3POLjN2eF1uXLmGm2sHzZXhu5n\nH/WikrPI7XS94x39JiAL2QXuAK8hLwDSeLuofcvCHpLNj17rvqY4kCEALVLB\nJpsKBPaNs+REfcdk+2enMRmRTZghFqSc7MbTqBUKBSeYFX1QChmjv/no36RL\ngaxz2h21cOlInvXV2NgXV1faJN2ZKYBlcMZOzBLaB/GBfE/N4fxFWtHrCDvP\n8jNY\r\n=7O/V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrsZ/WZOiZ/CjFMkBd7s8NLw+blj+/uajkxLJDhkcMywIhAJE1jgp0mhiIkxfTQKljGiaFkETHXDC1I6ndgZETrw3d"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.9009f6c1.0_1610135661110_0.39266862578504846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.ee99b646.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.b8a1a58e4.0","@material/elevation":"=10.0.0-canary.b8a1a58e4.0","@material/fab":"=10.0.0-canary.b8a1a58e4.0","@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-icon":"0.21.0-canary.ee99b646.0","@material/ripple":"=10.0.0-canary.b8a1a58e4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aKlM0jN5d7JLXAkJQ/K3JoFe/hptdQTdU7qGFDKvwrqgkX8iDKDNYXZwgf2fCuwsQtR0H6b7ZMngjuCpnfk5wQ==","shasum":"67ff6fb9ff1471791624cefecac9686d06790456","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.ee99b646.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpeCRA9TVsSAnZWagAAOOAP/jfgE2zXwk6XOdtsBL/c\n9uQaNVzpa6FR8xb9g3K07ZtXi0LBcDonqRzKVO7ija58EZOzXTjQWDEOENzE\nzdlTX4T5QaglvO6B3fKljFDQ5M6aP4EzamnJu8T6sESQYiXuUyUeRvGtnTVx\nQMHVa/HTbf6gvOYHmHxp6vRnABx0sSXNsG1tR1XSMuxT/G/i2h8dhrqJ44yG\nC7a79Krew1G0ZIR/z0k0cu0HcjT8xyuPywZJUSywH11aySu4OKe807TS/1nU\nCRkm63R1cE9FFjn8QOu0eiLJWFloSlY4bwZ1wjb9CS/SO7zO5F30Dh6xPxTP\nELUxuEBIDr+DkSNjNgxtLnztRcGn18BGLGDIa0cDFmhtS06EAwBuqxAokjjA\nPnjH0ZFKJVfraK1+8OdHG25D1Fb4Pz/wTEmhukQ1QXyr/D5Zi3VCgV6EIfGs\n4XWg1mPilaU27mc6lWx5t4jwrnZZCAiE09g3f6iIQbWCg+o6HRFx1Te+nLDk\n/51MiKg26aAfTXufwD0B4JB2KXlYLTG8s+gnrKafDSO2S+o03g4DQZvkhhLH\nc5WRAupXfb1ByyquqTYSg7wV4MaxlZxtVcsmHtBs65WFcRtTyiuV7hxoza1e\nTfPVbk4eJdZsbAaBu9G1PA52U0cYi34U6v7Fvx4oFH892oDcDzpB8rpFTbqe\nuMMB\r\n=aK3K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGq3C22eaY/UlJcAYE851ulDNhkBQFlPCK1EskDjRItjAiA5dCdKu53NknE9U8EGYgUWztzOojGD7VrZTQNVfqmy0w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.ee99b646.0_1610406493783_0.08520333005447878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.740ed33b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/fab":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-icon":"0.21.0-canary.740ed33b.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-s/8Xga6v6kFsXKh5wFFiiJwdUKlNHFkhJ8tfLQ8kL5I/SrFe5nHMZElI+DW0tk3U0QpM1BwCIklvZICYMATdXw==","shasum":"2e851773fe290d7fe2648a07967b39ff4869ce11","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.740ed33b.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSZCRA9TVsSAnZWagAAqIMP/ig7mNN3kuoDejnBBEHp\nNzW46RNWwJvAgwSstmsIUI4HFt0pD5US8dvokvQpdtK4CgJyTGHOqv5QVei0\naF97/Ez3PdBYfPUT9G3Zt/QS1iov1Yw2lskeffyGgZEn82rtPuskMDss02L5\nQAAD56eDpGak6a928vY3BeQD6a0wqeTqErUJl1TqN3bjdFwKNvPc4vM4py8f\nr+fVOgrsJ6AsQ//9tqAiMhvLKQgWuhpZvdF22PUe1hhH5vhI9So9jxDN3dns\nsihAAC5Ty3PpVY/QJsFDU2rnNaApEv9cm8zm+IYRz5u5kUUVG7ZbHAOVUljR\nHa0BLSlvoONZRVtPw+s69Mb+0HfbZOWxisRT6Evv4TpQtT9xF4PtcXZ0uH4v\nY6i29OikGGR7/lu7qx5caXFW43rOsDV5njvgvpku1yug2X7KrYE8q4/SnuwU\n0zMivtYm47pAQghu/CGKuCt91Ff9rhVKh2JXlnG+e2lQvTl8wx6qLcNDuzX4\nkDYh+i4OtgPpjUrnG1qW/bO1dLANw9FYJNIgvuJMSzrZ1Uc8Oqh9y/xwGBXC\nRk9SxynVMuq+KARVpwLMZ5+JvA3EzLkJFlKIj3RX0WcgWpWsNkglzCBHjPG7\nb5U/bQ+N7K6li8lg0wuvmo46YWA7/xDKvutlMe5p24FbFWaX76zFeySeyHiZ\nbiof\r\n=8D7L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGldWtcsgnjmL/FylbL/Iz2FxsjacHKAEO9/GvIpL+88AiA3o4HNNkneVRRXJCRXNSiGU4bTYcYzO6g0TvqTgwQ7jw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.740ed33b.0_1610474649449_0.9627667524254131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.c5c541b1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/fab":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-icon":"0.21.0-canary.c5c541b1.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rFleqTHM213hI9QJpBd01/EU6nuRExp0J//pRn3El3FeQ0PACcoNWekMhWBjO0LyH4q61pDZKZ22csaNtuQevQ==","shasum":"41c27e67df0aa4060c7cf9de6cbcfcd4fa3cbd36","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.c5c541b1.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5OCRA9TVsSAnZWagAAQeMP/3di62BdE5gHPl6wbLwL\n1Iezj6iUlrLuff9EWXOAOuRIrdMgD6fqif1PqjaUyauIRYllw7OwZGkCyOD9\ny2Okp/VjlWEKLGxcyqIJEIApKF6WZwp5Kd5uhogCj3yU/sCq64z60mr+3PLg\nUzRGvEZ4M+J9LaEKlLphBYAYot35Cr9JKugdQ1Q0TZYnh2uLmK0k9oSpny7J\n2sWi8NHkcF3Gbp7ttfCGcNwvdIHA+50wLSwnm9UI8qupOfNvVYlOKlxFJAj6\nZPyQX/TGsTekbEk113gsejJJlvIFGm8+ezy2KQw4svP/oZBJ1SPqupuTH4Gb\nRw2O/197wNlL6z8YCtXF0QIcESnFr/7Vno80mN6syQZLdLHNzc3MAM9uOS9C\nuYiVEHtqK/oR5PvHUQA9yExq5W/vCKh5NwEhbrWqGTSdy9fO238CInIZAWYM\nqquuP9Oes/6HQe5VKHWZQOD4schkgHGO0e9XElCB95jqH82S0RWIiqmCoWyn\ngl3GH9avwtsZg+YKB00jfREV3q23vTzK3LzzlNYIUCt0GeE3CD+qLxAiHejd\nUjYYET1n0ToqY7+nlvM0wn+TkjguEmuR/Q/BrvhoJZkkuXEeWZDhM/13SvdV\nXXOTdFahWg/Ux1WHoFL7PPvB852McDRRCFeDd6MXVJBO8XTcPsEQ4I4+8UfQ\nDv6i\r\n=zzlm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDDgwBUmIJ1+iSHmZiPh7AG2q8gtkebUR9tvwAvDhg19AiEAlEMt0fEDv1az8Bb09/4zDDX6/avpqp80rK3fgoj3mf0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.c5c541b1.0_1610477134477_0.24594955096877347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.06fe9d90.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/fab":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-icon":"0.21.0-canary.06fe9d90.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Wd/rw3HAXdEgGMwVINgEfglqXIt6plwcVdlotu0hnbLtIWNRnxCSl4xt+gdx86H3gafF8+2DU4oR0lv3/WaJ5A==","shasum":"986c1e64fbf68038f0700f8c6548be5a3c94c39c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.06fe9d90.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gypCRA9TVsSAnZWagAAT9YP/RmjQYYYiU7a9PoHxj8b\nl99bd+3gO/eIsSJ/VxEaJl+G8aP8MdiigE41HtH3DeiBzF3UP0yrWemTPAqp\n2ukpyIGQaBfHKeimmCrIeoUB14fUf9V1k30JqQQ205f+3pVnAPfhEMvwWLkY\ntYw0XQwUJdDqunt7HMVQtpuA+4Qb5Okl6J2MyqhzgAul6ED6Yj7AIn4jR5Ro\n9NsjIEI2H394ROm4kJrPKnnViluMLFr4d17EPXkjj8UQIgF3wdTDYeDWgznT\nyBNBFcTt+mWEy0fdR7yarv/5/1BcYXOH5e3Z+B+HxMP2RmCtZuiVu1xxY3OF\nzOroB0yESl4xvg1NcFHZ6WdE6HXU+ISQYdYu30ziSgPPccYmfIoysVfhLfs8\nXSmtSzHB0JqRGZaCaG9j6Tzt9J/owPbBeYMIYG5H8s4kVbl67xLdEGUZyBjV\nmCg71IXsJ0Fo/gCsLcBG26ODtKih2OvtkizxOWRZmCG0Qo22cXoBBqJyZFs4\nWQNu6LnaWKe45b7lXa3bSPjg3ewGaXqDfhpVgQJbZonC7iwYwdJSnrLZ9pvD\nV6RmOHCgldPzNVZX2tEoe29GIb77uH39Sfm04NIrh2B/sXjkbF5ZKrOfwwE2\ncykvLR0bs6PgIqH2nLVkCu7US5bz0GmfdLMWpe1YJwk17Lt8Ol+gpm79wqL3\n7rO3\r\n=/qK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLHtQY+V8j+dMzaAKKZMkDFulMuAgZSgAxUQdAQ0/GSAIgc1K2MgS/7CJj8XZxd+cPB8G6IKM+w0pJDDGikN4GXvo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.06fe9d90.0_1610484905402_0.12479861431036965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.269eed01.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/fab":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-icon":"0.21.0-canary.269eed01.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kqPaItIAQuhZAnxNQi8eHmYzddYYBKNcBEjrTsUHikiwYX2VrzHwPFMANZAXv5foGjc6QGdV+0Fymlu04epjdw==","shasum":"55b03bbed25b6570a11fc8574a5e7a33e2084f4f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.269eed01.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2nuCRA9TVsSAnZWagAAjAYP/0PkvQch2iwWpR+n+Nxn\n/wJkIRdD5TW6zYQDGykOCNWvLEGuA0w0Qu5sKXdZmCmSHWWgXcB6kMbF0fOq\nq4MKp/XlTzE5kr3aK9qrJ7bHGtMDNDedXyiJlIUYJS7P9+YWbVLknRFaPfR8\nWfjQ1ixovCvntVs84K6Rga5RBTyLQ4ATAbr7pliAFioEXS7ULQBLUkDVuKo2\nl1v+tyFz32iZICf0xgImsfNRzEGu2JmRqbq6CDNzD7ETgfFiVMDXuyIaPujt\nCmOprERXFo96wmjKENjWDYWG7zwYeT1mURMuaW+LHO6aIdNrmrZYxBqM5NKq\nCKdIIZUb6Cn42Qm1zaZ+Gzwok0BfVxG91YdOS+yLAXFZOIiPJEfTCqdHWvaX\n0rdicnDYt152j0yH4I1SYBdDjrJLi01gTH5dvH7+SJDLnSgUjC0CW9i60UJ5\n9WWV9KdTY4eneSwIm+hP9DfsEWrTazQxQx2S+BkMegi61u1/j6ljMQUoJ9pr\nJfiDH9ZMLlvlbCG2mdFr8StKJmtf0DKcPaN1Qxll00hmRG5ApHnaQNgQnHAS\ncGObYuw2kXav5QtMpWo3EkbpPEpPp47K4z5at3z3AgHAE3ABy7JwnKRBjIm9\nMEvxufZ7sx8x90m2/2AOP5FSUOa9mQhlJVSxrM7RGx1/tfwEyqTxEbct4fTZ\nU2BR\r\n=s0RR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBHYuHY6fRNr1sVcmo9/OL6AGyBb/j69/luZnMwAEy3dAiEAo+xNzywpD0s5pbsqNvHGL8TdA4eVTcvy8O0yRJU7PLQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.269eed01.0_1610574317669_0.6579895619430922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.8c075f35.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/fab":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-icon":"0.21.0-canary.8c075f35.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2ltYDMLLd85c64U6XVHbPWVTOG8Rb8ltzQCqu0Is9DRPv0eVohtczz8Cp4vccMo7L5q2e1JysyuUkRgclxOW1w==","shasum":"e1607846354a724c05e038a5b9ba819cd474151b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.8c075f35.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30bCRA9TVsSAnZWagAAf1kQAJX2rF/d3dTUU4WMtWm9\nWAo3nFWcEi4bMoJAZ8jn2QosoigBw7OzONaAcPV7HxEycBPlJsky3O3IqkTo\nSagZV/1rwI11puJoWN2cHTfz8d96bK4bBvW/9cEf3ol3fmwlFKOhKQ/uAa56\nbk8a4KAQKACMo35TqrA4EvuufCF5a+mh9RuxQ0VQnDvBD8iNqbtYUpKqjl0V\nIKjcTrmQMVHDVHfkRgGbbXWMtGA3/FUu5cJP7lyFrb72Qs7uomD20wUSFVAb\nucKneS41z8+iOEyVvlFYHLYULp8E67tf79jrDwDEDFuQOOmLagEPnbMY/igc\na6bRlNZ+fnTUb1Xc8tXxs5QomYtUjJESMPlBe4IElP6x5BMFAuk8V1iE+U0N\nbSm5rjVe08GLlymR1hcrHbd91Dq9jBPXxtleCRMlguxVwbonhCWY6McKXqkH\ng/hCsflrkJs8WaJrU3yOFKfzRG7awsWHpbc3XY5hJ4dXZft5OdT4rQ6VYnEt\nFEKHwKvCKjyEK8VpfDi35k9e5unjxUk2aQfyltWSI+OfEOyBn60CZgNGH+x9\n3HOHMxvZ92glrQ6+Rn3wd23H+ffqVzJ3pGKSL/Gl1lPVP28ulltUnQ+KCNL8\nXFyew1eL0XewA4h+azzSSvQHjc01St9a8JgWJPh4ozq+oodPPXg0ZtkxiQGO\nOMv7\r\n=2KqL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDydknRhUWht4gA/aoEmq/PV4/niQ2K1EM70SCIxzqzMgIgP+wAdknzDMNoZ8QDLCWXUOXlRUQbRIThQhhPRvDtefI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.8c075f35.0_1610579227254_0.6273052176614893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.3cda381b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/fab":"=10.0.0-canary.7584267ff.0","@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-icon":"0.21.0-canary.3cda381b.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mMCPcod352Xzlju2j0InbF6qSyCU6CxMJqj+CDGqVtjRoqg5r5LrW8DOk6J26m9SOxtA4EyjUMAvIlbzMcZRrw==","shasum":"2c343d8db19731d153bce27eb0bc8027cb4e6200","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.3cda381b.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qUCRA9TVsSAnZWagAASI4P/1wCMbE6StPAFiVzVazI\nZxqjpCkHG8MZN9KIPnrz8y+TXwPXzXukPcAodd0E6p6MfxFA7018UEwpaYAH\nG/ghGAeYCfozd2Riyuzpg3v/+wYxZIrcEuPlHtYp1S3bUaIK5lRiR8FlL4LW\nGD3xRGilUd5qyfj7mw/H89HIxj5dIn4bLnHzNH349mR9HeJ97paBPMXxNI48\nJmgWxgslp4SEIDHC6tEcU4QCfE6SBVs92d5Nx64kVpX1T6EMOOWTUJ4W3e6L\nkmSk6TyDg69KVb9nWLsuJlSvtFFjy+rGIvrlpjbazlIn9TsL/3yGm52HT7Fm\ncMe72Uvw0KwV8grNm0ARftNIcbWzDBa22Absw4cwR9ULTXZjclpd/Sc5sREV\nLIRtTOEWREsHALV3n/d0HOFi5cl/K0yeMRQQJbbi1X1ujEPxOc9Qxlvk57Jm\nZ2dJDuItXZlR1Mllzm+6qRm9BHCZ4Gs75y05V8bboLaGHDM+K3txXLGjogKz\nwl0VGqYKMwsUJwBOnuNOOjssjfv9MPNLQGrEzM8vej13nmR5TuXli5Gl6HRg\nVCwjSlgQ/1XXmqXoP5M6yB0g+QjjHv2e6Ypfwm5scj3lJrAz24d1LRWBKGQ/\neLbXVyjPPJeQk1Ba2w7A4m1OdgGj4QBG9gYmuimYYSonHHrpfJkf5uh9/D/U\nn26H\r\n=5Duk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6FFw/nI3gbH+NqL46xFzJkAkJ2RYAT+wHEO2G38PJ1AiBUDAo4lGc9rjik2ZrQjkhu42Xs6E75ZKJoue/YpPo2Mw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.3cda381b.0_1610582676011_0.06754564819744457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.bc113605.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.772cc1068.0","@material/elevation":"=10.0.0-canary.772cc1068.0","@material/fab":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-icon":"0.21.0-canary.bc113605.0","@material/ripple":"=10.0.0-canary.772cc1068.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6iFpE57KKEXncZCDPvUmAaCOXXnzS0Tpk74h0IliHJ+JGAfD/KKdLBaTTho6aou/N/vyd3bCBe3P6x7DzFj1Wg==","shasum":"be0550d68bbab16ce1b4ae883bab06890357f6f6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.bc113605.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QgCRA9TVsSAnZWagAAwSsP/0RP/vTl56VU4Z5pY6/q\nau//Q3PvRvaDBO6qvlcOP78vmrxesYsWxvLceA2GYwgFHLVTOXfStQBg+P1e\nnl/lsH8NcbwAPbjfcvuK9UvOTfoKDK7KDtTLOGR6/fqbVaNoAOJAgGcqVc5b\nDduSmUPjJKzqytEvd+DOKf9sjvvYAhKXIxzZmtHv1mTtG5xrxFWR1isX5E0W\nk/5t/q4tQRPlWXkMeDURPbBZcamPDu3rTMtrIs0t4Cuz8shyqjPho25kqnbz\nTfu1h41zJk8Ui3EadRsFAvCO72HNAnUrRndrDOIyOdU1qi3KFXIMMpNlZ4FZ\nwntahV9ND2sru5qNdYhSau1DUkhQIpCvQEDkZTMGYUFR8BRSaKF13MbOy3Or\nVXHasaFtCK86Puwdx4KSbBkyIrvuZQrPZD2/Ab743M5Al1e02VKj3IXTeFlz\nuQTTROoqQ04jhjszTRfaLwcSNy/jrzlbI3GtEjPIIv1BFPJhajOyR/bAuPMo\nHBLx/feZ/G7VTs9Tvq4OykbnTEqM0Oju5HYQXU+D2JBZyXZ8uuTvKIi52NE5\nK451eJzLoIYwz7K7sbdAiePnvWI2FWXFhMO3TawD5OS0DZlqkipCF1ex2Ww7\n8RBM6Gee5ZeLSNeu0Z7TI0M1XHz0vxo4gxgGwEK5AaO1RCRHHq46rNN8IaAA\nw6bf\r\n=WctN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk92CfHr5o/0+Dn8NTprwsbSH6UdEYTvQ2ao211fJnQwIhAKHB1wSdlF2vrEMwBpbpqJoENAcXyNGUf3fplreUYGji"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.bc113605.0_1610585120047_0.7663069040116008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.0c1d6ff9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.772cc1068.0","@material/elevation":"=10.0.0-canary.772cc1068.0","@material/fab":"=10.0.0-canary.772cc1068.0","@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-icon":"0.21.0-canary.0c1d6ff9.0","@material/ripple":"=10.0.0-canary.772cc1068.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-yJm+vbWXa37Oh7F7gRxSL3+ogHzFYGUpzXyJXy5DtYH4xrmB3tolE32/CK4reTN5Rccag8jQgz89AN6VzOjAXQ==","shasum":"f0c1aa5a2673702abcac506977a51ed0f6482742","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZwCRA9TVsSAnZWagAA4nEP/ixdCIhULgMqyM53tBlm\n7Vu/dc8riU4VMTUrSQiR804K1AK1XYZj0CFyLyHgZa21KC3KM2n/zQEikogM\nP/ViCyQ4/PNo9ulHHln///x/RUutdprlEKWeVgw/5ZBSEGH/nv/ktkYvd9Uo\nerditHb5+WU+du/SKlXz6uuPGr48xD7XH4LV8SaiQOT8Heg+nLSOT31vnlBS\natH+4hhVnJzmuGZ25xB+ta/+5ycqU6bwl0SMFLQefEExxQvb/sTsIyFCr8Iq\nidpKUWYXIVWpBTbk7sH0C1QHztmlylb2A1NeVmv8qJaWvpjq3zKyYHp59gpo\nTgtkc7B8ILAebH8w9hNN7FvMbknzg8o4m9omuvF/Q9g8HaL8/42WbOvnxJT7\nf3CWzPIpZyvbIS/m2TDKj7ZomFiw6bjl7pNmzC6spJXfZOxBKcSMmqmQhnM/\nMxMHwLNQEnP5FwRswpGTA2W9lJffmHr+946pg0fm3McdrhzLWeTezx64y4A+\nrCp70nQJ4P8fg5FpJCN8DFK18Hyc9qAOALWbBmkXjgdbxforaBRDDBV3WqL5\nIOqIJoP+MEyE1wtUPwClERH0G8T/wsMOzdUgsb9p3+Axt9yvtOgz8LkdSZ/y\nFl3SfdIAivJzzKB0SBeIzY0YXCiyd97AUYWRHaIzWgFQyLFsvKO+RBDYKw6p\n6yEE\r\n=wpGI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJmEkJ1j+nMDpyVFPeJEr3J2S1PAVqxQnCf+fcCvEVPAiBA61mJcde68loMUKT9Dyf1IQy5yUJf7PwYT5TWq6cTtw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.0c1d6ff9.0_1610741360258_0.9374542015758407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.b4332e00.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/fab":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-icon":"0.21.0-canary.b4332e00.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-TIEU7T4bh/82+jq666M3FvDsVUMXEPLCZaa9lpYNpZsDBayUiCm8Xztt6jN+ZlHsYi37yA1iaUOF2OAkiNJwYg==","shasum":"26c5bd7a04166c79e9ff1750bfa445794ead3759","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.b4332e00.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIjCRA9TVsSAnZWagAAZscP/jLDdoLtJTXC8N5u5pUd\nTYld2/HtU87qZVw4P19lldqx4XSYP+MY0fJ6n5AQGqiYa5R0w7wwAoUO10HC\nMmfJIm6NzQisfhhqdWX5UrHMnhZC38RnddSsfb1Tj9hTbEKmEVo44sUToMx8\nhrogYy/3yoyViHokkXKJk4x14VgtpzJIkrSzfwxI+XOQgBbgeTreKODBXfml\nNEHxjJCi8so13edGKZhfjZwx72/jvpyZWHBGV0XeRLSNGHPXpJlrBjtAmmbV\ncJ/4VZMgCqzXKxbDNOmJe4/K0J3S64C4K7+jYPR6FAVSCrxxobLlbtgS4Ckk\nz+VT9Ym9mll5fUsbueB2cf/hTDooQvGfO2CGTryThuX4zuPKnJ+cLQIQ2lDV\nso2XCux4fOErqaKi2K3MCryGpZPdtCsHC+8COzmsFHEXHytnn+6c3d92MKfw\n2m2f8VoetKl6z2eZHdALvEW5uQJIUnwqJAeajy/dfhqUQHwIz8xz9ps67yyz\n1A3TnNo6SYPrBEJINoIGLXI3EAktXsZktWeu2i+xPEL66ZDMwfUHmIKGrd3S\nrBGz0QIBBlIHyH9NoIZ+Ojq6wY7CTUrfMeLX8lqWcqwvzCZkQLFxd29MCrK5\nCJPT2YfPQoGiwgCnJkCnQo+QdkzScqGhhX+Zp6cmsmqKXL7mvKmdfmW0R9aO\n/ZlF\r\n=gYK0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD87Tq2Z1l6c9t1nCSm93/lQA3r73pzWHEy7lFGBpxvSwIgPqAjOWOR+TWKfOuhYYVd2mdZpxiwHcwRTwB7jZYZ0jw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.b4332e00.0_1610748450597_0.6226674950827662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.2899691d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/fab":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-icon":"0.21.0-canary.2899691d.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-P8N82bdRsFPeU1+T/uhsMK5HJn3H/NQdpF+6FXWQDapteKBrHiYgfmGgWvoqUv86kYK25MZwx67CHUkVAtY5aw==","shasum":"5041a056020e39586520313871e005a41ed33de6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.2899691d.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUDCRA9TVsSAnZWagAA7wIP/034s5tlDoc0+FanUhtU\n3HSG9bi7lFBP8YFb9yuZ/sDr0Y9QrW7MCC6G5G5jSdY951jRxxVltpx0+DDW\nIoQpLSDXOTUjDzspt9lTyTQdEONyBVn+RJfNIye0cGvsisaV+VE/n85fGWvQ\nicIUkhYQeer7YjfDOgKIsCWKC+85w/TkcgNX6L6dyWIrNaoacrur8ISCItoK\n2ZVgmhDjkaRSNNSeyLT4m1B3I3siu4Y9iRTsAR8rxOQfZQyW3OIeKaIjG215\nIc7GOODHg6KjbrQtcEfS6RgbFbv1xpvJlnKUxTtu1NTsUvYCzc57xxESY+A0\nKwp9gZjPUIwgTexmTSMVz9qwD3eT9QBGJTqVCCHXIJtPU9TtJvd2/Q2zonLC\n06DwG89X9oMZQqCr8j2JC7HDUwAyEeU1rIqsI/vsJfcM6sn2DTAkpv2F+wah\nI4x71cFwynxYbctQ6bTVXGtNpdUeSV6AAeRWNm2maUaJBxo8iUgl63Q+JX/S\nctQvzIFQTxq8CFRIsO5TONMuPo3u9Hyrw0yYerKGBMSXwCcZzG68Z0Vk2h8W\nJn0fSTVVGulutevfckAH3OiR0NntqNdr16I4YiXeUUcKRF3JXHQ93YBzlLDw\nu4fEzKIz2ahbZ7ZojOIu3xnf2OpxUfpkKaHXr6nBqQfWrD9Hi3X+U0eW1PZS\nlIPF\r\n=NOKC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXmqDrrDsPgb8FFhyGfPv0Nc7MSbc+zML8wbjVwv4bhAIgI9nJ2wMICCg3hJRojza1nRusnAYhIuADBWmKtmXqgu8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.2899691d.0_1610761474845_0.12823090941361914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.fe73953b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/fab":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-icon":"0.21.0-canary.fe73953b.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-TIzod3gYewZcEeU5ozvBgMjpD2CKl06T476kBal5ghjaO9C4H0CpmeJ2AvfiHkbWxrP85Bzp5IG6bPtOANraNw==","shasum":"1aea809e792a44ac9dd1c0764ba01721930d7419","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.fe73953b.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzE1CRA9TVsSAnZWagAASZAP/RHWVysITv5ue/DoEFnV\ng7Y55uUNYrJyLurZ/brwWiDPBhpR9QxATg+P6BXw0hF1B4TCInfmvcqnmITv\nnE+IztD7glfzZjcbvfJkr1y6fyETjLeD3PCQvS62sX15DmyMch6i5luY+p53\nd+n4TxbuzOmHl/z12yl9Ai8eXnWnsYc1rbM3TPfPZe1ezOPil5iJZnIpC8gK\nkgIU9DSmQm1d95MEd4NvQsQwbpWD7TujaYf3t45zmdpQei333TuVndY+UUyI\nX4ofj5Pz18/Hfj0m5d118xpyZbqbfdC7/ajm1lDt5Kt6os9S2dKJPP0y0jdk\naFwKpD8S7EBNXUEDHsgeMuwidkUihQ9KfMV5p0KWFtWgs5dpJqGk0FJJXei1\nuxXLOgkP1JUi9gfDqb6UeIJ9zThAwrtkWaxclUjf6Q5V3TMvAJeeZHESdpjv\ntzFSQkoEWDksBrIVkK7PsOCe04tjkQLnKOaVr7UteUgZxaXHr3sB4POcudI/\nyxoNxtvRygKwLOv6pQ3+bmR8ha7cQEEy8x8MCSK7JM6fueVx3g31Hry7RSiP\nZ+221sReHpm/Ktj98xV+VZNDhyTBqqq6mSCb2/Gkd4sXU93YjCXgXHgJtqOo\ncjzyfQ3rM4EoU38BVC3JuR0EzFqBBVr4S7Rr1cFiACRRzX4QS5h/i8b4X76m\n/1ad\r\n=1gR8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoyGFDUWWlnWOJkCwYju04sAgsQAZDdDtkgDINFkKCMAIgAmvandApY2PE63JwUcx0uhyxulWGKEjwBVqKCKcEa/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-fab_0.21.0-canary.fe73953b.0_1611084085361_0.32621074186477816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.d3a16455.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/fab":"=10.0.0-canary.c7c5da28f.0","@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-icon":"0.21.0-canary.d3a16455.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-1NwaEbxCeCY5IaPRybFV1pdbcOzXCCvF6UCirtTMUgGK6w0eMw8lTvbfFII8SZ9jDowb+hkzTDOzpEY1l7Uhgw==","shasum":"d286d94ab98b805d7d8fd7417a96a7c4c89d661a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.d3a16455.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzh1CRA9TVsSAnZWagAAgw0QAJKfWwQIOmaBRKlFfllV\nr/TKg64p5FzDGnrfSyMW+jhKh8Q2lteDLlg4gKycrKP7dh9pvv1CNSwDeTi+\nT4uxLsCkt0g6fIyRZTJ+O9ycirlrpgdBTra07XsUB1O7FdQK/BGXuKkG+gH6\nG2QJUhra3OwPb2dZdK0f+wf8d2zQ9zUB6ELFpZMp5IrDpX4ZCzw4QI5T7dE1\ngOujcjWHOjAOaDwFItYVBW5e3mdKT+ZOQsAX9OE0RSd6wRozMSOXM0BKR3lE\nN6Pl/ezMWHy/cnX/6C0dIH2CAkMmAqBfZAtD4My7BbYBAguyibVMoiSURgAS\nzBiVcm+nBM5MwmLEaGcJftkhzzqbPlSNUG7lgIKjyxyPQA/tq8KC2GoUB4Sc\neLsWJGJv47y6j7y5jBE3Yc4XmlmCvsKdtp6BjaiC98ymMhTb1N7EvlNlw4oL\nBJLpVoYUKatfM1OiYuNa8SkCjKtghBncqd70NFq56EU3q7XLV9m0BMh/GyjT\nV9ODEU1sU9wJBfGUwtVWQvFnFrC+n1W0Jb0aARJd07UUrsSJP8snruZnrB/I\nsD/bEr/qjpdUvAv/NbCffA7jldeoVJmvMgIIjuo30CTi1q7BKnwSeuOwpS09\nohl0RoRwyO0KmUVcPoP7BM0EQvbSgPfggBN6n9jkpCxyNYRKPQzoBDVAH2FY\ndC3D\r\n=piZQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCH7sZwrOsoZd2o2D33ADFKILNT7gUGxiiGyO4WrCB4aAIhAIRwsK4dE/IWCFw9SmGn69NATQD/gaMM8IVAIIxFX3nT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.d3a16455.0_1611085941082_0.6134382334440958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.597ca1b6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.b2faa116a.0","@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/fab":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-icon":"0.21.0-canary.597ca1b6.0","@material/ripple":"=10.0.0-canary.b2faa116a.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-fKGAs4PUhFuzJpWOMN0wLExKoiyO6QWOjojAsZfqCMekzxj7Ve4JRW7vSHgyVUXS/f3daPReZ+VoOZbUU9NAFA==","shasum":"7087eced9204449f762ad1fd56ee5252eca5be82","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.597ca1b6.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CKCRA9TVsSAnZWagAAhawP/00Lb7b0MBXhnCMZvbzU\nXIs81vYxhPcKMAOpTFCu20Ug4Kyo53erK0HgLcl5N7C1mvsleaWLKGdJGr6l\nnk3N0qNr0sUAdBYGx5luTdL8qlDinL03itAIQQ/RNsk7JhpyAQTFMzRDdZ/W\nh3+AJpDRPA68kAzePvuWUpn51EhRiU5T3mN57gTi+yLuhp5jqajjHRjNWa2H\nCaqcF9OxJDIlNu0Gg6MqcaOdOu4d1MZglv3yjXZo2nc2+rxarhZb0FkeEtVr\nNa+t9w4Z8iLA+393u8QExd2MJmqMLfCYaFwPGjlEDWpw1Xiurg22TTcx3hDY\n7rXjuB1+rvNerQsqmxKfClv1cKkkkAzaJrQcVqAhKKYAiUqnREl7/UWNBqJC\nURFk4cHYPP3150whbGDjiFDLIvyI8InJyNBkg3HNSC+TYDmVmL4RHwCkHs57\n6WswZIG2Z0k+N2psXF0Lde5zZmpry7PwXirYbyPQXWhNY3UBAj0K9AXBaL6F\niDuYb7Snlw5kh5ZFs1nG/MGcm2gsc418gvEZaXhSTxKXyQtUAlwKyG3X4GYR\nje9HNTNuZB9RZtvjCKW2EFJPv0LJlW8tVZZqT1jkOrLZLhAwcGyrDfhi3OZS\nTkTuk+TG9sss6vEaA8GMBTwbGVKMgoOtWq0OlUMi9uJyWFZEKvknaKznwUS8\nHZsY\r\n=WHvM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYmEieUDX2SRGJdtOLvGtz1WbAr4RKcohwjvvD2wcIhAiEA8vb14geOLtxNd/71z+w+yCeNO4LyVnKeLf6M8q0wr4E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.597ca1b6.0_1611104394377_0.5868752051301376"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.3c195efe.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.b2faa116a.0","@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/fab":"=10.0.0-canary.b2faa116a.0","@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-icon":"0.21.0-canary.3c195efe.0","@material/ripple":"=10.0.0-canary.b2faa116a.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-nYYmduvzv0v7Xh1a0s+G5TSsyOeGnnTgK3GR9HXxLNAhgCGsdn5e+ZN/V/V8HOysRIEB/sRcUJl1DXfr3RoiZw==","shasum":"93839d5495493593851c34f9ed24b5a53d122df8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.3c195efe.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB475CRA9TVsSAnZWagAALX8QAI1VJfKchEbIaxd2viGY\n6u3j8JvceTDfUgxME4/6eDDnRdy+b6CK9PF9vXd0rnMO8J0lGgxCGsz7i3q2\nuR4z/VdKt0xktqDQGfDhy9e76CgOE+8isBOetALb8rkqkT6iN4louwbKSutR\nCG1geRI3J06Y9KXVWxOZHug0ZDIvTorXRXUI6ZtyhupLQ1FPtLwjpPXF0egP\npgafukMRnK0mgj+21ed8cEm1vHpnqu+rEYWOSYpXj50AdplbBy7h7jTAtwwu\nZQfPya0i2e5aNF6ORbgetG+NUGMAIGuERvDGPtjxvMLTjXVDqnVC0EM2FeRc\n9/2GENSOGB/nFcke9F1Pu9u856Z26D4I34qJpEr3IuwSj/7gbGFewrkZeIJ0\nTR1CBoDmu73O1x8mn6YfvLCX9+2fUQb8t3Eeq47MzlLpZgp3Llq9WsHVl/E6\nFBD4ve92wFEMSZcXVzQvyvzJyHfSlBpcJazMTBTfpYRVTpF+gA1Ooxoy1HvH\nT3cIY98CZ4PaR3XtfC9c68rn+nX+mAo5IK4jvdyvNZ+wvvvyAA72vXH3OTTC\n8njCJpWaj9n0Teq/uIQckmzzWWkkh9b+rBSyF4K+nGBq6KonLM+/K8ena9au\njgfQYNN+6HcHvudNW6mL0ZG0BMp9jYR1Qp0nyWQy9Sfo1aYQh2Y9MhnKz77e\nXwsK\r\n=Tisg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF5tZhNcodddQySA6OhhiE8TXno2RDcQZrpf4wsScgAuAiEAs6mrBIfTEFckmsOdOjvHpj3PZxXWh26hRvU/eoVLnKg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.3c195efe.0_1611108089378_0.5852734556191936"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.f7b8755f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.0c95c9f7b.0","@material/elevation":"=10.0.0-canary.0c95c9f7b.0","@material/fab":"=10.0.0-canary.0c95c9f7b.0","@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-icon":"0.21.0-canary.f7b8755f.0","@material/ripple":"=10.0.0-canary.0c95c9f7b.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-FfmI8L3ijq2TCW+yprOWiUi2tahuNq+wOMJp2KXBqFt4OvE/3QXPmrNdEhvwVRZr9QlTbMEsPGubCT+61t4ocQ==","shasum":"e34aed07e81d82de22570fc30f332f90e431e655","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.f7b8755f.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSXCRA9TVsSAnZWagAAhcAQAKRsWMt9LgfRGXmQCxvk\njgNUnjn/tUgrk0ZSpOQxBn70cGoKaZa2o95HBV/LIxkOXCcinOXeasDQ+dVo\nlgeJuG8zuAymVIDl9qHfI89PINPY+onymTYOKfDGTbmTaQAeXyewkZfvn2QQ\nmQxwfLvrvfdXsYUNnvav7so8R4bTH7PtxzpzIAnYLwotacGzvP1310tLe6qT\nP+eOwofinjD/mnhlkSFehI7KgJQo+QKZgM0Is2hvr7GAwQOKVZTDiOFxLs2l\nJkzBMRCq/v3jCtOC2DtfF0jBeiuAtvVrs09jKR6YSzx/ycu79GjsiBKtn6Fa\nBVsjujev83nVwOdK7fcnAqn1geWOThg2mXrUukfXPhgB0jeS7drdQcdImrYc\nR+huSnddALH7+48xHqojEU8zzDdrNEuTLt7nIvaONFw49utOATMFCQ8wLCTz\namcmVjdPeOWQkR0kgdexWG5gv9QqiGWatn1HeZIRPFaw0i8KNkKtRETV+5ua\n5yvralX2pCsGGjk3TIaOW82oMgqeMVZCxFABlYP5Dda9sdlHs6HTnX96QOyh\n+NdiVFzUglXqU4RSc5dVyaaLkcpVDvMzjaWMz2rXBBNPEJlraoMS2IEuCfRT\nrxl9dBxQyb7Vm/wJDwYLLY/tAGvg3lX2MOU46gPfanVCzFhKJlm6Uf2DscM1\n45uZ\r\n=TV7r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4K/TYv04Ea7GyCb1jvgpNxXWZtY3VVCXhC4J7U+/qgAIhAIXBCZ4Yrv3lh7oGwn9WVmx1tOVcIo//I4GRHl9mTyoe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.f7b8755f.0_1611175062625_0.07263562782986677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.f60de7df.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.2ed2d829b.0","@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/fab":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-icon":"0.21.0-canary.f60de7df.0","@material/ripple":"=10.0.0-canary.2ed2d829b.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wHtpMUW3AhSGZmfmPPCSN+Dg3/NLhI6OEYxwe7sBO/f13ZqINrVVLWk3MvRu32ifzSPdFj7TvPHweCvc7ApI9w==","shasum":"04c8942566b42295a9db247ff937eb9745e548e1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.f60de7df.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6KCRA9TVsSAnZWagAAVTkP/0FORe1+EBqX6nPh39yy\neXV9xTeKpEG3Zkbf688JX129S/v+qRJevhQgSpLMkJKZd90Dwt0a9eeat3rJ\nklLWBvZMB69/CEl8Lkua7FxowESy4oYC4HMvKtdlHyYur6dgWaIzw0gYLo9J\n/P0yqp7bjyXXGy3eppbN61kmONuJzaUzrRdXBYspZaohNyTl/H+L3u0dkBwT\nVa5bRfmyj6VEGbKZR7tIyVVeb8Dvf/2Qv/mvDpD/dsEB/PzKMIBMaMDK3YMq\nSEYWVQ2YLY1meEcFS00OIpZk9qMUPnlxt9ke01HVide+Kh9d6o8j7WH74e/o\nVYs8FsT928o7D4TPXUwuh8XwiH/p6hrb8EqT01ohkXEXVI1ea9gKZl4AmhEC\nahKz91d25GMXi2zyCzr5BP5mdL+mkQVe62iKiuvglfMl+v3+M4Lhf+DVwrxg\nFxu2h2Xlo1vvulj+ngVW0PBpxbzA22VoqMtnw8F42fRqNW7bU06UYjfriGtc\nJ04S21mjrSfNpiDEQbPG2NZuFxtd7+Thjd3NKqaY2aU1hWe6VBTipm+JxAR8\nz3TsWCRgopG5Rk7O2jcAt3K3CZRA1D3BxVupQSFCjqexJ7zKnMt4LIZNePXp\njXYXCzxLj+4poXke9PWpPMzP8iz7tKTCcfP6aGaQ0mYcfJFBnU0qHFbeVweZ\nDbIC\r\n=q4w2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYnri/6Sx8luuqgCeKuboca3xY+1LuE4KtPXTOFtd9nAiEA78R0MTjBYKpruftibbHCSh7a2kuIJc42EAgf3ItMeo4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.f60de7df.0_1611185802118_0.2301575544953176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.664a2927.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.2ed2d829b.0","@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/fab":"=10.0.0-canary.2ed2d829b.0","@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-icon":"0.21.0-canary.664a2927.0","@material/ripple":"=10.0.0-canary.2ed2d829b.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IbIgTBH4R3KSbKO7Wv+pyK3N+deH3HNZYxOGF9iKFP1Y3Mz6nnZ/KG6ic4opxl3Ly8NwtAa3mBH6cgMolP5Aow==","shasum":"d7bb1cba198d97b26f21f41b60d44c9f49bd42d6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.664a2927.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOOCRA9TVsSAnZWagAAxRkP/j6v03EvqFL6/nSbcLDM\njSJ4f2u3/rukRybzqYyMdks7/Kxbr8buexZ1J956kcfVS71LVfz2HIcn7pMw\nZmHX+XJN2If4izbakudzf73RMdlViPnx38hplgR6EQ8GbQjOf+NO93n8mlAa\nUiGO9fBkDvA/wHCPRr5JIXN0V2NxfpEW6zLBMTt4q91EDEFhE/MkIetvu7Cz\nSqWlu2FIdcv5BSBza9GApaVs9QstP19RuH6wO0aRvKArPTSDC3yVOa61lM7z\nAhotSo5c+WGlRiNNaMq0bHX1ZjLkM29kR68JukxUjR/Cu9HTaEe2F7VzVwD5\nVWenZnDSAE+Jg1Q4FrNI50CT6oKNE4V6Ny3223uEFgH2bqVRlVl33k08s9As\nihzSGMMeHaas+B3XbNlrgKRcA8h6K2hQIrvdP5IRmeBJXRbz7CiPphn+o5rh\nMH7BpwkNVMtm2frXERv5CnE3tAb/0jESOtQYJGQDuHVTv0qCNDyOokf3dZCO\naGW8xIST/Q/068SXKPbYYT/aYi448e/NmdoLsCFtqTyOXyHJbBvTImp48J7B\n6AbQ4cbskpDmq4frVbvsQR9cETB+dMWrdBZveuR/b4jpUsgGHOLmmCipRue2\nF23YqRiThMVsU3HZlKZsSNv1b9zsUOyKr0tQQSKNmp82mBtD3b63ucJVU1pm\nsMqK\r\n=NS3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7j02gcGvhUnaACbr2tkh2L0H7F39vUKA4FUcnrC1ogAiAarFQVLFYrvO5kxs3C3zX5Q2MZ9s5OECqJsZZG1MAenQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.664a2927.0_1611256718374_0.1736107489629779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.a6d312e5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.fd61b0476.0","@material/elevation":"=10.0.0-canary.fd61b0476.0","@material/fab":"=10.0.0-canary.fd61b0476.0","@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-icon":"0.21.0-canary.a6d312e5.0","@material/ripple":"=10.0.0-canary.fd61b0476.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cIfyWDorteBzLXZOfkufFSEMWOUkYFdmqrdvbAPAMe0Ts8eSAqOambHD4BD3DyUd8I0BglrJDBBp6rxFsHNH8w==","shasum":"bf16492345964804d627bd68b16affec49997ac4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.a6d312e5.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZ3CRA9TVsSAnZWagAAWw0P/3YDHhW/jzxy7nMKHhLU\nv68nx7TI6xz60fOv/Vf2eDbpSqpIoGJ03sBQW/kr/EtP+h7gleHriTtnT2Gy\nvD7DE3NKCehM2+N/7jXQIk9KSFH71IRx3eZdbx55vU3eN3Q3cauNhSsmM++U\nqmbDuNw+DUXkp9m0eyDJgYMtameqn5rffGGMPehxa8akozV8RXtYpgCd/IrK\nPXNI8H43p25erF1hzRX4I5XEJvHMkK9RzzXSm6hWswelqnW3x9EU5P4zdFae\nw1YMfPk3UAaUm5s5vQhK6LqqETDbpSKy1xZs/kdevhCV4aRlEK/rZRKwzlbQ\nx0mlOUkjFl4EcV4fWrsJ6wW/j9VLFdROgp5pMplyyXlSx4DVn2xUjXw95chZ\nB+2n8wK8H0ciC9rpASeBj9Hm2Wa7U7aWr9kTxDzjArow+IwpIjdG8o3hfRSj\nmo4UqTeQjSyQlgjLrFcINvwpzcBOMc+73WOf7ErPYbZX26XhTR1xUgLl2uCL\n0R505AS1g7un1XpgS5tSoYNv8PDrtIZwF8zdXJQU1lABw2gSspXS4AxQGP05\nxT0Tfc/OxmX7YcrSo9/RW7CtKLgQy6mfISeYxUTVJD+ThFQkm5r4vze/DX6i\nhSaGWJ4xBQA6z1INYIkathW0A5VJj0G+ZI1qXNcOt/xfKUsQ7bzogYOWS6ZZ\nyjnA\r\n=VuOw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7EZV9Q/mB6tnmHQVQxJMYISgHubXhfEl8iT7d3I1naAiEA8sW32AcMcJ0a7eq3O5hKxvKfrg560NIgPifS0bjrXdo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.a6d312e5.0_1611265654958_0.21746851891465946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.027365eb.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/fab":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-icon":"0.21.0-canary.027365eb.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-178/uNwXS7syxOLelYKXvlXOqMkJKYL7GPe0d7Dwzg472Cg4pStP1KDkw5tQvtp1jSrEbRWGWhQmqjs0ehXiDQ==","shasum":"52b44c437f2ab3e2cd5e9a86e5e4ab2e2e004730","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.027365eb.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6UCRA9TVsSAnZWagAAosoP/2wXRhHw9/u2QMxh8XT1\nAOrUzn0u6yskxwYv1dKsemHM/VdrcVvvuwzlFsCX39fvg9o68Wkaqbx2k95B\nFdBKGRdyf5w4T03bfPjpjQ7AAeUVQWCLa5Ypk2t4TMD6U02/pXg7xXgMyaCt\nsNbgew752Pj/1RMfK0xOQk4joDnctOeQhceagiUPOp4fibd+DbBqJ0IKCTjq\nDRznyYFiXJOEIgD/cov5yCZbIvUH8rUGtDR5v6/yHj4O0SB2hfSmPk1Qjt27\nIOSywEEwBcohAp2PPUNjYWz6wLQRHlX1IQgJiR+SAeLQ4cIRVOMVQlHIgY2O\nmis6B/Bx3wxVz19tAIpGvhrhsyKkq4ulJ9/gxYoUuSe9kZ9Wnkfm05ulGM3o\naS2i60D40nKTXfOR+UuHgB+ugDo5kFQrOrv5kY7l00x1JgyL922KEwE/fTY4\ny4jZ4oxcc36XkQYhlQM6B530KnLJnnTYSPukgS+lMu3ov2PVRNa1BeyzAQP1\nc4A/MHRm4zMo22F00e5w8ZrWwBH0djwKejWf6YoZiYcC0PV8/CV+LNypY0IK\nYg+xQsCQGqTQvUDe49Kc30ZPVC5m7kiHcjB9BcfD6S0w9PwolaeNEqfKWDJg\nZu1A7j8v60/OV12ZNwsNNqqAa+ZUks0n0DOq6mML3G4VK9JV/3HZC6M7XQUu\nWaqn\r\n=URB4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA36w/PFasBYHhfK3XixPid9rWSlSbNSMt61KNWAQkeqAiEA98ENetnuYdUc+S0cyXyxthPjuYUofX7Jr57II+lNRK8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.027365eb.0_1611349651964_0.3953505071393597"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.7e72b66d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/fab":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-icon":"0.21.0-canary.7e72b66d.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DU3tUyUFKS2Bfwz5LhSypA6ilyBF160pxddMynxf0nlWubWRYT0SKEzVtuzG/OPxR+PStKc2Xb1ThgqFafGFTg==","shasum":"0936aa3e562247212401e0869762a68a8e2abe21","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.7e72b66d.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18qCRA9TVsSAnZWagAAOMkP/R0gXmdlXm/IrdIph42R\nTVYv0f5CPbOYc/EBHP+hidCbcJgwVMuG7PVIK6//A4asLgINa+7H0S/qFbkf\nvy0PYh7HteUGJvbMaPSUYUyZ0jP5c2TfDifWpl9Q4H1n9D4VvrQrtCr8TlOQ\n3GH+IrsB8HUn3zx6m2j24uOtjsyKka01xltOp1xdPtG8ydwUBBNbfOT53/Gc\n3QOi5I3soC78/pBZMyXycayIZP4AzfaEkt/WV7JXDyHr3eW7RvGx+hfXxJUr\n0kBf0INDhjwnN0DblcV8Sekh9epYXEIFNI7OwkxSABUPrBM6ZwyA4tDjVfQG\n0FPaFZR04dIC4k3HhqvPayUgKSDgJu6FA3uNMfOItQMMTXBR4SfLU4ghvZdm\nqbpsyMfcUnkyLGA3T9sbMsDCu89rwZMZYvXlgSnQkJx6dmh0KXebQcGC5u7e\nSFsZO11CVW5ybjFjrOIuH1akqs8ioY9uxKF2zHtd4j+UhqUe513Lz6hUYqDA\naCDe6A0PyOEjgWIRveZZmGDiNe3jAeyOHUiZnTelZBMb41Dlq8uD0ls9KvFs\nQj2hrHM9a/Bahl7UBAqZJmtDG2sMqDQnI7NfFjx6cZ2iXZkuMRqquVw3qRt8\nbHISoZ01HzWxe8Ve68SLCxoX/vKm6MWph5q8DdlRRMK8275o79OqhRrkhH4s\nY5fe\r\n=ToKH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6k7ZvnHLQpugUB1FQXHM70UrbkC2N3Doc4ubJMVBf7AiAiACzMHEk67YF9J8q8YCgv/yPMn7/p76NMPLIeqFTl3w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.7e72b66d.0_1611357993976_0.35861648996119877"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.a6d6a1e7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/fab":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-icon":"0.21.0-canary.a6d6a1e7.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/5QaJlld2JBVFg6Q5r3KML3Iij+0QuhhTvD6vhpIKwgSfmPPddGBOVo8gjUOJol+N0QzpM/NCq8GeVgaUPKkow==","shasum":"37746666fac112d4967bb9b6a56ed3145c15c22b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2ClCRA9TVsSAnZWagAAT3EQAItgarxsNG9IkWd6bDpU\ne2v0KzbPlio0QT6hVKu3CDHJ2yUrZ6lfPjB320uEXNss8zkjXNfyx133rOi4\n9aXQ8Ppc8zESOwfgtBw/ethWdathCW+AKP545wUUAVwQ61/+qU6rSrzKDiym\nUZ/DB9HiR6xnXiS2yqmQSGsMni/s45KWi1XwgbYPE1zcmhjJkCVmi+2P8UHf\n24P2g9FGey8/fBUg3b43UBy8ObB2jgeY+AOWTIk7BJQ18+qAfddLdu49f78S\nZacVgDziaFGDYbXvREkiLDUV3WtwxzgSzU34A/vd5f3x8UNeanx4CU1lGYtZ\nmkuCgaJ9wL/DqRY17ltecCH3jhdRWxR877mnQNdctLBrwZ37UWtdKYzN0aUv\nyiLEW9FsV2x4+lAl50OMJ5hCi/DBHM74WKWyXkQ+EQKVqq5RgfWsmc1yfHnA\nY1xgPnpEkHnef2jbhHviGUjODzGQ10zosZpIst4/WbcYUqu9v4JSUKgYcZCF\nNYZF3Z1txjQ5Z9N86chY9mOK49BCLVKeNkd0KHypFK+UqcNT1iwPSV0yaTT5\nFdgjJnXI1j2Whax7DcbENdfwBznLRRrSCEMMWl5aOFDb+FpgeZjZWbB4Lh+Q\nZZ71i4vCufcTRAf69bmo/yZvb22hSaB0X8iLv2bn1nzFajwNu3kCRn0etuDm\nGJ3j\r\n=ZjUu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUcMtRelX4sl6JvnWL/hXQ/k+dbBeLOrmL9EfPtPpvnAiEAl5Rt4oxZp3ZMv7gk064N3yeWMapF8KkuFIlPV1YrukU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.a6d6a1e7.0_1611358372620_0.989042625718435"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.b95fe100.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/fab":"=10.0.0-canary.07deaec27.0","@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-icon":"0.21.0-canary.b95fe100.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DRd5v3Ts5bl/M4/Yt7JWqvFua0w0HF374RrH0xEpf9wYUr6eK59A9E8Ob0yGGqMcja6TMrN+MN3yJvkP30OmAQ==","shasum":"ab7b88da01013a49b06f65d6149c3e8c7ab12775","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.b95fe100.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UdCRA9TVsSAnZWagAAKEsP/30ZEzpyGYCQiVZ5afH9\n1g58JrNwkTynGpH7aZAnCuX8g1INPXWrtIspnMkHucIlEOPq5Z4m3WhsM/0w\n8I1K0ROwyyPls6jU2D8s/Uy+gmOo/6vxKUOS8ZZWAO60SfYaUA3eoa3WE4RT\nhswQCf6Gtmfqpjc/LdD1qk5bB1COsPAY1+bBUda4bEWy9MpaK6z0NYVq/dG/\nN8d6YDtH9yzgzRCNRMfRFuj6zezzYgrEITG8pahvX/UEXkB40PsE6zJiCk33\n47zBRDNA31eR6BOv/oTOpI21hP7KmWXwxBPd6x1ZxhGjivxsnABK5L9PviiD\nvcYZ2KlQ7SWjAUYcgpIXogzFXOImpq1Ca5wtKBPOzQYodSu947AqErqdmbNO\nVkhVupre191i1VRL1zxuoHnaMazCr90jEqE9NR/VoKny2T5Uay1OLoCfrSfP\nyh7/JPQ1fVZWwM8Z4c2hdGjgBcHcUCb8H6Ydnv3Oi1skp+I6uU1OLl6qyq/M\ngvM43RKCUJ5T7xlXCJd/dz0pRt1wrdhnZLyd65go85zq2c+OQYNbH0X1Av4Y\nyvkc3ajIQMFcR7W7CygQfdPE8+wv1u8sDk7SDo6TiC2pZ6NuNk/X8Aqs0AE6\n2oWfNFfbviImViOh4ALHWBgmy0HK9yNG7GaKtjSC556zfMjUpvtll4lIdwkI\nFvft\r\n=aVMC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8pe9z9M3LxqZascoStMP5ALAnrycqs+rrlLXfPl9C1AiEAmesYs21KhTF9eLLoVOVCxdDcsOL4Ic7t86oQGZ7/21k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.b95fe100.0_1611359516636_0.2803177191671906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.c8797192.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/fab":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-icon":"0.21.0-canary.c8797192.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NJT7GflIsyEEI0WlehxwWs4OG4sWW3yJm4ZXDxL7WuYdx4JyEdrcJCtq7xGRTrarJU+0tliRYcsKyyEh6WIqpg==","shasum":"defb1a47718f66f9831ce0ad57623831f4f87afc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.c8797192.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2i5CRA9TVsSAnZWagAAvBIP+gPCCn9zT8ohWGXQhKIx\nrMN12Uyr4LH1SF89ZTj8ieMgGq3Ytb0xo5Ol2gtu8BEMr63FelLtJBcA4kQN\nmveuL2IHMrHV7pLgUQhZRMo0xxu0HgF4pWBNrYi/VfNxLaOFqjy6ZyV4OrCQ\nDDu0BRT8EkkztU8ZYy08jBZ/t6k/1T9lrxFSYFGfWFvESnffd2rIpxDoiKHa\n5prGqQtx7bwZj6/qNx/ADe/T1NZ/QfY3XYP4lX+dY1a5p6VB4a3du+N6mCsG\nsCBZqrgVs2ErqkEe6PNN58PEWspFjzLwTn4XJkR586k08YBi+VbJVRlBVY/Z\nMEv/fA/nGx6JFIisTLvkqH3GAf+zIf4uMg8tRuhGr2qF5svs0E6aggRNpgZW\nTnykKALkrbhQRKHt7MHpRGqA3hvLy1nVeNDd3JGQYFh4bbyltxCBpNNeFb/d\nGc5uIw4ek130ok8h+8NceJ88jKfs7R4Yb6x4+q+9xvA8tRvSRYrpLxvE+kln\n4+QG8NIO6klI1vJFppPhgoqbJVn2xp8M3JYSe2siuge4R6eKQPid4E0u5Liq\njQT7xpdxe8lCsEQay0tEIYqjxbiPV7S9D6MVCQlzi/ofA+QJJrFq93Ba21DP\n4NXR8Zjs/nyEsCDj/omhggoNKg2/qM1k35m+cBn/Q7zPV9x3imKzBvdiVtky\n3YmH\r\n=jQyj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgoiBfTZ1+xuI7wGw0GdvP+Vrsjxlc1rC33GS8xjGVwAIhAOmwItdDj2TfO7SR7yT+tNqZ8NzJ6ElShZs22mCVNhCN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.c8797192.0_1611360440873_0.5827999744929286"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.946f5563.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/fab":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-icon":"0.21.0-canary.946f5563.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-m2os0My7aAnekIKuKIOsmmUFPYgo9Loks/37/td7EnHNxd6nMdf+l1+A64fxZXWgTrwzHiefqANQMLnEmbqt1g==","shasum":"874c54c97eb755639d622b20b3c99da40a3a0525","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.946f5563.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3E4CRA9TVsSAnZWagAApBIP/1wT/ZOr2c4umGB3m2EH\nMGRWUib87YFu4RyvGwkch1tu8yR2K7+PL6QvHEkMQQCKlw/q+hB9PsJe+r/j\nJk0iktypTdi30cYsWrskE5g0IfNPShXvC6rl5NRaAjKZTo71Et3SkJkGw1wY\nR1QZyl05VRNSeH5akjUVPUKt/X23XPzmYt6XM95aNgNgvNmeeRvrKDUt25oG\nUOE91FZnb/19e/DkQVcCgssMDq1+tmQuxDOhdO41avGK4WhjckaK3Z08zg0j\nOJEiLRc9E2pLBH45x6PnkyeYeH6jjcTO+3Zyb+NF2zidVP4VqzWTOP5j0wQ+\noSFQOZFcekWbD3KrQQVwEkM0PJ9/BQOZqHPPZjq6P03au7GFkT6O6pzAcBsA\nVfp+4MK7yIbpSuFZ5Ej6Zb14RSqon9YNiWs75toDCAtDm/V/WAzgL30YKtrW\nHZDE9SbOJnzZV0OUgTb1rOe5ZCxTVdp+1Nk2JKb39Wx2phpa5wodeujDmNa8\n3IpQYah4XlbaDiGBUnO+ML4AFUo9bkbM7EeHYRlcCKHajlaDImaEYHZOnSwy\nA9Swq+30YhGcEiepJfHOO463107MVhDEBoL4MIHZQPmr1Bqj0NxtL16v/WRM\nI1GnoiHJ2EoqF5wejfj378IGZz9ECHKC7C+Ez14M0TJBVnhx6YVY7sCcw1wr\nMWFt\r\n=fzLM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvwajxmgOwKTERgh0VFfcgD6tTdVZROeQJUsWNFIcD2gIgQYO4ROHHRQivAPr77jgC/8aGlDocHfvyrOvLEYLv57k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.946f5563.0_1611362615679_0.19913835875501018"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.43664f0e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/fab":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-icon":"0.21.0-canary.43664f0e.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mJYCtuTwI86Y0ksF1aJMVEwpdgAh0rxFy3kTwH1xjDOufx2WcaJ+rEGwB+aiQDwBwZnsL6pGXDKr4IOsgr3KfQ==","shasum":"c8d60bbd300a88284ff9a9eefe595a4134c45ba8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.43664f0e.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jLCRA9TVsSAnZWagAAeOMP/0S05GQ2rUK7nmhrUIG1\nf6nrCrlH0AXbVF5xr9WmOCbPeGmMd/QWEwAo5QHktNnQ7axWOTVvUqXJ3gER\nls2yyqxgeeJtG201+P8ZFm3mM5kRZzedCnpJ+tPbURUQ1UZPPMtrBLGqWQ79\no/YWsPZr4jOusRp0f4AFOhPjcmlsydAJoSXEhyFIufTy5L0LKpoTPQgB8PUu\nTPF1COIRPeZ81/auRJuLKhqVCGEIxg++MPf1Ind7PgZM5I/S/nyk7CZaetfl\nkAZkFN8SQBNcuEXaKYj2m/T1hI5KLDHyTyuTgQgO982swDzuC5/cKLsFbvdx\nlOjCLlMJECsrAgRnIndGPxFtk4LnS9tf5+wOKpFVxwTgP7mqAK+5OdyjOAey\nbetYxOTKLefEtxL+shJjEkLZfc5moyzVinudgRlj7RxKwoIGvExA93lvwbwJ\ngMCBTWaKpefAmEovYaxZgkYD9sYVIdJTcRXRah22jja3Rnsqmq2lwnHgeKRM\nk+hXmWujyUQcr9XSaAXziAy3adcEdz5zyibBGfuPsmrwPBxvc2Gja8wDUc/+\nnaWil7Wn8NP9SJh3PDtZW5N0IbjQfMvqsmT00yxhXB3Z9PLMpXd99PypPVIi\neXpV8MjZw4N5jaBOjjkhpPZTFa5Kd/0Qo4+Q81CcJbZ6/MKNmvVUp4dFX2tX\n7uv8\r\n=v+bQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYwcV6GIm0Sc1zvpqmQRDfrId8d8L/nBqZ9gEVnUUdNwIgPHEIfq+D48vfEFKcbD1ZqrePMm1V7R+OmgznQcMRl+s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.43664f0e.0_1611614411179_0.5961001644880566"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.2e769e3c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/fab":"=10.0.0-canary.b9adb7a0f.0","@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-icon":"0.21.0-canary.2e769e3c.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7n0YlmSfuBaoWp7bIRDoSGSIvoLICvh1mXAmU6OJpD6iHoyQUwutP6eEgXa7pepnKTgJvDQXz/6JjoWQGWQUDw==","shasum":"c5e0e3c4a85d6326af50fa5e1ee41ac50ab2a1f4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.2e769e3c.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1z8CRA9TVsSAnZWagAA88sQAJzVnKHDJdNcvfAc502Y\ngwCt2PXxYphoYqx46EtFfozi++OS+2UXOjJiIB4E/En62xL2oBsqNzQkchch\nLh2ZKN0HUks3w4fvXWNPTsLH99djyTdxWehmv4vRaRGvlXyd9Scfx9O+qiTh\neGI7LqMPS/f+SvJfoeSbc64O2zSopKXGMERlVZSJwbElBbTwBhTv/VdNO+G4\n0ClVU3mcQvEw3V08AddCkiVC5YTMghKVty1UHiJbTh8wosjoJySpn4p4mCUJ\nv6u6yv0vc+ZMmKxl89Afbe8vg2oYhq/DCTABKaioaufstJBKT9znaf6eLtqJ\nGfuDYkOrQQlu2rscIK2+00pPvZLUug9BGHVUqVUrgxznm8fyJlDxFMPj29zk\nLfGHO6Nldm2auvsDMd3MDEMLVko3NsT8UysepExCJ1GOfU5+4vlqL4y0s8Lo\nmgxHDHFzx6qUlqF5s7NcwN4+llQ6BmbxZPF/Tl9dzCUnV2kqaErtH32PfVpc\nVw1J5OkA0/N4xVng9zeqn11WkuGtzAk/StDvzETz7vP+kVUNWci/SQQG8+H3\nLKsNiFwzUQX9odxFJDdt6OJWQHMGtthnqDCYE0g5+vp7yARIxir/+jYb2/Zb\nHsBESz+f6294qCYoKPk2449pjYeC0OXYCWeZzdeHeLXZLIYglycFdoprkQU2\nPsXU\r\n=Api9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/gyeAuE5ekN7+VS2tPsmy0Odz+JHd9adPU4nQ0DmjfwIgYApxDMv/dvxBwdPTB6zRgHEnzVaMlcOpgGYdCNLtc1M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.2e769e3c.0_1611619579617_0.2654804764211529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.14e01610.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/fab":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-icon":"0.21.0-canary.14e01610.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-RMJAAJuJpfVcbfcvTlmmHYell/VrDqIpgu8mRl0SdfX6MM0dmsMffoT1Bt3urdz6LyUIRwiDMjW/g2xbT60K+A==","shasum":"b3ae7cb3e5daa59d4cb73eea73b0239cc9878dbd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.14e01610.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRFCRA9TVsSAnZWagAAbusP/iwK8T0P2osla8EdmoiU\nPpRq0txhSkdMKi7MojEc5I2qQ4ofs3tj2ElpAbrT4Ma5BGhW0l5Nx4S6DIGO\n5zrXDH7sBHN7WJ827mw21lvaurh9qxh0dKmOKESL6DU6as9qrPxZuS5qQDLh\neFe0YFmjgf2Ln+IWteetfv9U+cGPGEX8aGkzs7wy7WycOrUFBh8oRRb0DRLW\nTXvlqDFwohePanMXJu/KEofDHFNrRXZ5FlrV9S3gETskMC1EiAwEGC8FJvfO\nC0xIbknPCZhKHikfgZ1jobKEv4pe1kgUPwyNb/lT5pv3eApmCuz4l7uoREj4\niosYHtGslNIuCcXgp3duiAk7IL2AB95WEGy12Y1Th09J7uOgE/xIYHWZ1LOy\n3V1fWqJHaOKSmRQ65UycDZuXzjFR2kCvIs1xmHnhOXLD5xnCo2Hp8+yeMNMZ\nQOKFhUZUcwv6rbFy1GAEV7RiFLSLPw+6WmXkgKUCTutSuounrniKmJjlGitL\nAYYyxa1QSyhG+sDR6/wcYaZ8JdZDqxrm4vcuc9tZNgLAC+c2NPNibCIUpbpI\nGWzKlsuDhf0GIs8nGlkMG/D7CMwmQJ5Qs0/tNwRhqyii6+zC9jPZPHQf11p8\nbdfCmJdcXPMS/LCCFMcMoaQ0v0+sOfqLmLlD7Xl9k4KvVW6DvxFuDd1Ax9R7\njq8D\r\n=RPhQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfYU2/tUrM3VNUsXp8H3y4Fras3kN2a3dJyNxSjMcWsAIhAOY5ppqds2MiCV5r4wkba4bj23qQ1Qcv3ef2SpHmB88b"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.14e01610.0_1611777093365_0.30444649134109825"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.5de00c1b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/fab":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-icon":"0.21.0-canary.5de00c1b.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6A2Fg1rO/YSLR1fAW1WaWbM1eM5ZLKCPJDc6hnHdzMy7+C4RWUPY5KU+P72/0fT8m6UEVl6r/ls64KUBUjpWLg==","shasum":"dfd9a65cbc93c9e1c6dd98def26e733ccbedd8d0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.5de00c1b.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpKCRA9TVsSAnZWagAAME8P/2grWZwts5GPZSUZ/JSP\nwwavUlLxUrHPH92yj9Mbf+suvT5vUUlGIZeOTc03y11fGUwVP5G3wQAdYE+b\nayKC04MDAzSipq1AD4PS99vr3njz/F6rdwzOSlxlaePyAE6wDg2U00TEot+V\nlmAuMKRcT0RAMgsai2CA/Eq7GNCAR/jky05gHrUNU3yBxrQekT6Xu75fiS+U\niKAqDwjEeAy/YPfbGOOWqFdGcSxEKo0SQ0CJzvAsZzweqEjFL1fftfQL+qv7\nS9STpfd6HDEQX182V8/fEwiwgtNdUqcikcKfA9sX/E0ycArXVlL8rvncCQ8F\n+ZfO4h8V6vTMwgpTHIYH8oZRjfcEfv80olzjWMztzJVlKGo2HMHKJx63H8ED\nPB7gKqgvQGq7A/8LZ60oo/Pams53PQ1qxVQUl5C7+q/X4ljdl+wR9Zbzs21X\nC5VJdkQxZKFwvukVNKcWBd1YRC2eZdilmH+BpUlT/VxAfx7do8j9B08X/gDx\ncMkV/PPz/HYExMleZ6sWh0jM3KNEA8lJxpNqjI4D13qya+yf3hE+mD3iTcZz\nhEIrsfN/xuLMrzhE9LxGuOYVBB9bTDZDpRxUd/lLhr3FaYIiA/pxUXStyfxq\nMCijFkKJX2O/mu6rwTRBSKDWIRC7xYnuwjN1mAUd2pMWwyKw68CWBkZfckCx\nFtT4\r\n=0kPc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfqz2xTi2eirR/FCBSzh7kh6iTe6/jCJKLQ88kzd+7ngIhAKX6Ws3jSxIHo/BB5ZD0GNyIM65/F099FLR6K8qxKIaR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.5de00c1b.0_1611778633827_0.6013064387120741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.5a328336.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/fab":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-icon":"0.21.0-canary.5a328336.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-iiIs/NyqyfTTnZb8UBSwJUd960zeqf9VNQKviT1XfFFCuaTlEtIGfuEhhavxo4RjpuZiyfSOm/Jfgr+/j6DVRQ==","shasum":"cbd5cf1540decb181d7fa584f0825427b78d6261","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.5a328336.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExaHCRA9TVsSAnZWagAASGAP/0n4ScGwbGn8ZkUDBMKX\nkzfQSPkI7x5CHgdSkp6YntJBdgBDMZnHlkpbl6l4iE/xfgDk0fvLu+6mJHnO\n2G9WDpk7K/piPYaSgkEXyxRwzw7LkuXiEMGXLV6B+cHAMx4/NXef1ns5LJal\nbPno7RmOsNE0wL8jTIXEvVrk19h9igwcNZlxmbSgfStycd+fb+v7jrmFxCtI\nRylqM3ILDhvLeXHzF8ce1Kd9VM7pYNG0H0srTfmqJ3HPT+Lo0OAFRlyhjYl7\nW5zR0AUNsGann41DuoQ+IugS8tnxz1Ggvzz4guJ1GGHorqE//j9qp3W4VajR\n1KNhbKAoPCbHaxkUaOj986fJ14gFFcGNBCX40kGKaU4Bjv44nSJiaP+7i/Ly\nLLreQgZgoOC99ldaRodbfyR/1lV5H6o3ewLPPMM8YqdzQAoUHkPehIdJvOT5\nGdo3PGeOPR2wgmPxgemFPj4QvsLyQMmbKrxJch0vlO8f9GBQWsmkt6r1W0VU\nfYqz06FV+HKT5MDNqAKbBPg/5U4qLlKpuF8zB/d748MNJJdXyg3pq+tPLNZg\nyMy/BBX96SuOebm5W+HMo9v/Vm8p/eErsj4byiW9g5CD/yozJE0BQOlZuvkn\nfty/kO7qi9Ljav/h0wML2TUSUNNrbvOIPS/WbAIQmd1WPyUy48QZrNk6qs4L\n20ZO\r\n=afMx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZENyrXiUoNpXWG0tV4jUGtoNO+t8lhOzDHQtM1wtNJAiANO5G2fIP4YkM5RWm/sWlGumWBUslC2XkFxbgb8KC7Yw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.5a328336.0_1611863686929_0.285333647294272"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.533b1251.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/fab":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-icon":"0.21.0-canary.533b1251.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-yGVVZU1CtWwQgEOWIdBsOQhCB6xp+inkaKI0So7lSZbt+cYtHzdMyWSSFj/tdhsqWaaFENdQ54zR3sXdyR9WRQ==","shasum":"221bac57c1a9f089bae042df376eb64988308843","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.533b1251.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWxCRA9TVsSAnZWagAALXcP/RjQXISUVbbI8oJdvMze\nNmeS/MmHETqoAUS98kq0SbH7mJtgNi6e6LLwiwd7mexUklrdlyWKNRkJ1Ddr\nEAwAW5aF2AVcmYof+NC/iuzKml+r+xe714gaJJ0+wdvuXzuX+Ev6qOD9Moco\nf3mWm6ipKLZNwT8JrWrdYE9g76g4cWIhyzY/plI7D4NTyca/QHLD/hoBR7lz\nZ/wGFu/11zw/FK9JnETm+I70ncNdm7OvV3/84GCDq8P+iM01swqQWTd77gaK\naw9Q0ax6HTubFd1+8E3pUN8bHHnz/TiD1pxpi4qW3w49T6HFp0VHzYf+kUMj\nku7PfO55L6B6xfcgaTWtfwpO2kdQ8L4cjvv86po1MQfXc0Z0zlyLq+MJo03N\nNCp8YVZOhpn9x8kCNea06gbDupVZArg16cMUazkldgAyMdZ/oNlAZXZ02RKF\npHJnpgWS6f1eie1PAIBQGjgHZFu7W21nN9Gvj/hTL8crfypayWWzrJxMK3QY\nlIzOIgflnXhqHQoRRx6iLgUEO865y/Mf3e4x8Lvp7QTJsdLgJTWs1EIgX9SY\njlbX4a8Jz3J+wL9/mT8YzzgRtl0/ZjM5Jy0ZhdNLAW4tzt7hnaYeZZBogD/O\n/mPvXCBOxjNzIEDKndyC7VE9amKZCLE9gdVSybPqSfayxbKQEznnTV2AQ0DL\ndik/\r\n=cmiL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPHGLgosy2hD0QXlnECZu6wTEtD5J+1asMa5GV3RCohAiB6HW7TGBkY30Cixf6J1cfGtHZ2irVsx1BHaCswCxe4ng=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.533b1251.0_1611933104986_0.8113321541189058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.ab5c0a10.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/fab":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-icon":"0.21.0-canary.ab5c0a10.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-az47iR1HP5Ks8p8YTAecEpMJofFtxmqXna1R/MaTsCTES9HeEQj6GnBDULHac8UayQ4U3np2MWsl0/q/k5S8Hg==","shasum":"0c9efbb65464e391e58367e7487f6c32f060450e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.ab5c0a10.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNcCRA9TVsSAnZWagAAUCsP/0JpkZffh8lFmgOW8c+h\nHKQdwpq+CmVlerRCY+SQBXguTURKgmub+aOz1u5J6KuaGxsqDPspV1geYXNT\nl2K/aEhBa1cA6zgPYP4gzUaZIK4DQH3790wAGz0WuBfiLVyn1uIcc2G0JNLl\n1YGfOCzhOv9pJatNuaS2M3OoNwqytMNlLLUSNJd7xvht3rYK+2nAZsJCtZ7g\n5shRaW9BEF7ldiHfIrAjWWMIVE0EXh7+qMKplo4bFtT46L2ci1EHxT/GIYeh\nS/5HxOmDXuowi10CBmh3Dg7qAYNbH/poFZunfZhRlHEAXYLOptpak7gDOoQn\nLbwc+KEEcFfhVJiFKKKxEexN/YnUikNcUyvHpETCmI7wx3WwH+sZDKqBG39T\nV7OKM3ZBlYhFrehcVyTJEkKI1BaLHXRaz9mqDqcvY4pycA7XSQbMzSq/8cLX\n+3A1kXcNpp5nT0p5PR7RIWg+jZD7NBND6EiLmmmWpy9uukuvpoHgerWsQ2OL\npOkMNAyRfaeMDnNWASTGbcuieK2az14nwLrwTzgwWYdaH9qHsRuT0TBz73Eh\nwFO1C1PlMhG67StT4Fi63RFMhtdpLm+sQLZB6XiE542dfZIGB8NO1dnMzbHP\na/MqVSs+xKyhU8Nas0h1rj02SVSvXyIBGLLJC9HyAI0Po0NS/MNErH+zfcDm\nA7ng\r\n=PtRq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBG3a1hegX1xFvL0Qu7g6mH7RW/TkLwPmymZWfJG33vLAiEAryh67/e2Fnx5cTnjV1MhFr8ETFLgTenm67WjpCr0M1M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.ab5c0a10.0_1612297051865_0.26171938466533184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.b7a40b27.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/fab":"=10.0.0-canary.96878e1d0.0","@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-icon":"0.21.0-canary.b7a40b27.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/AVhOuwkhlF1Tk1bXj/Q9mNXXfK8QC9b8h+ve1T0EliMdEyfGp6YKXfuDGY9EMINX8Eii0E1KHyTgtiYYJTctw==","shasum":"2e5a0d0bcf9721716b6630bf149333a43606f05c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.b7a40b27.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtYCRA9TVsSAnZWagAAqKUP/2Z0Mzexcs//fWxLPmoG\n65pfnnv53546scrkhNjpSl5/0ogNHH/U16Yh+K5+9dQQmUK20n6tpZiIsnNb\nZiPF+9XvOAb4VV7ANxUHTqYHlNpJqBMDGwfGE0/qTVBQ4Sl+/lKHFRkgff9V\nGNOA6uQDlT0zv3JDgv6szMVjmdr2zOpmhMXVSeKGNCmuwc6k7w6Fw1kqRRP1\nFMIBzLHa//mMFq+K/q96Prwkm2DPxn9eMAShq8HegBzOEpJYX3IQzI4vR2Ej\n+1koecYbVcG0/cTEJK7VH9rrZJZUc48PzaXGrkqylGmQMacvwLKufK0EWWj6\nZrAzTcQbK99EDLQHPM2kmnCXf3zBgu+p5ci7CFpMXUAxomklfNvPIC6RMFc+\nkFSgAqfnIrEVd3qeHo1q5lES4WUhgxPVGor9RP++x/tb9jsBblSNG4vVXe1R\n60pLhCUyBEgk9YE2aWi+uHb7hSS1j0McRsh0pkpguNc0nUB/wBaScOFHsvhQ\n/X6G4nb4zt664f8mdk9nBeNMWSkwaB1QJPB/KsvVBEeHZSq9vfyz6hUzLSPL\natI6muWPkpqERjl4QZoZCVg2g5eUWwgT2Ny0ZyIcLnF58HfrQXbUi1t+e1gX\nlcQdt+Er0dpksPM/iua51LkHZfX2RFEtaftt8n3CdlRLwl3Y5JmTVDP8MkJ4\n4olN\r\n=NqKM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkFr+iqZwLAJv3PlJLEIbFwX8ZGL/unxWRhLNqy3NTwAiBb+WKKpWk25EFz1oIpA/Ymtji4mqrJYJ20V7w1ZhXmgQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.b7a40b27.0_1612364632344_0.30640921569458035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.0fdee204.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=10.0.0-canary.8e66dbfee.0","@material/elevation":"=10.0.0-canary.8e66dbfee.0","@material/fab":"=10.0.0-canary.8e66dbfee.0","@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-icon":"0.21.0-canary.0fdee204.0","@material/ripple":"=10.0.0-canary.8e66dbfee.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-WvLAcvrQnMlUoGfZjYDF1lwad3ASHVd+cSItdirP44QUrLI/4KDp6akevN4Id+B0G6Y+7/KpHD3miMkObxgZ6Q==","shasum":"588313dd245cf2096fca2ae133891b2d1ce10ee1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.0fdee204.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuykCRA9TVsSAnZWagAAnD0P/3VlFasN+d7Dq+4PIaZz\nz8LCTqQVpQqR6pkvefAUZvyFQhK9xco4B22VljV8rG5mEtI9Y4chd7+ofPZ7\n2/ACJOkHT76P2T87gwuXKCpQOTZVdUHTjuMTPOuhAoskKSbOW/nucx/IGGhG\nPT2S3aEVnm0b09QZOeAmALYHXE/xmGDkeSxtC6hV1mCmV2m+6wzssKl9K6YT\nxI+71hURkTJcCkLcjUi4M3YSg/ZeWX/KKb24w9q4p4GFiJ/Yl0n1AQ8FZzvu\n7tW+DYAREtq2KTxG41HcKoZAAF52NNORMEKFLd3BZalpxUO7LAmczWRuIgT2\nB/YJqjDLrSjxzyN+AyhEaI4YhTdK7SfgSG/S61grTrAFa4kubkW46lqjYhm0\n7n2xZ49W46790Swhj94UkyXmqMxt4LiRQL4U5p+PGEwOLA+12znAnCnZzdW/\nfEjX8EJSuzt2FanP5UI36GWdoHY24zyag8SsOBhXKmz/KVE3okFGT4HITIgE\nQcgywcK+RfUHLZgXuDzqwGaasBWWzPEDyvLsK4qHYDvsKk38ru5g5dcyJHiv\nrtY0EdgETLrOKE4MzuDGG+cJbFyaCsrGPApWi6GJ+gudmJIxg867v5AXFC7a\nz+nv4kQtfDv72HiImYfnErzii7J2i0tPsyY4FnpQFGGn+7J7Z2FfmrSlRfH3\nazbs\r\n=l1L2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWMFmzr7+9GhYLpj/Gx3JKRykSZhWMWw1ORYfRWcSl5AiEApRlz3eoJkBDqZqlsrQ5M3TErARU1oR8UqgJfJ4bTglk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.0fdee204.0_1612377252411_0.9641388279164373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.5160e548.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.b5227247d.0","@material/elevation":"=11.0.0-canary.b5227247d.0","@material/fab":"=11.0.0-canary.b5227247d.0","@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-icon":"0.21.0-canary.5160e548.0","@material/ripple":"=11.0.0-canary.b5227247d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-RbHd2MG7gZEr2MECWlwlktocrCvcLHL0rGaw+GRfaOC/NwuSAWaMJzsFfaqTczTr7RqYEcGDO3RaiC5F1FZMiw==","shasum":"4ace8aa5aa7aa8d666f5f6c2e7af27eb869c5c65","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.5160e548.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdn7CRA9TVsSAnZWagAAXPEP/1cL76J0gOHyXwkMoT3v\nyKT5/CKIJ47jIRRM5CHIa09u/sOV1NeGjoCd+zzd+TpzCobzFsk+QNqDA32o\nKRZypcWxAOGA5eF8AYgGSS1PaqLdZjJYevEX+dB1enE25p5ZIYOgKXcZCF0F\nVjDbPxHgF4XyrjBezQsxEB1lSHY9nPwVQM/WVNrAjrESUsiKHFIeE4QtmHnA\nKIU6d6dufwcauDNgbpN6lKe03L2GsMNs/yFm4jIIcC4VMMQbMxH7kz4JZZ0q\ntIfPRux5Ph3GDL8nKrG0Tl/FXK2qTyCYuiJ19Scig5J5a2paawkJnZ9yEnKa\nVLCR34D0WTSxiuro7ggkbRh4/t6N/PVMiF1Xx+pp9HHa3/XdSMMc4MpfH+nD\ngK5d6ho5xLnEFp5a3lKPIgqmr8XwefkLMisAWJkIC5iJ7la8a03Td7MWl5ke\nAAgWn4MmT5qhA4ojvwv+CJGFL1HX1KUFWEuvUJR8jipbhG4rngseGUUPh40v\nxsSWBqaB6VSq9I/3T5XoKUIMTCijz5sS9VAXOkcvIN1Dm40WyVvh8Cy+qPQP\nvFN0gCmblBtK+DJbkDQgYYMEU27YpimVONOWC5zHw+Ee2w457ib0MBNLLc36\ngHfF1Jpx451fv2r2C/DiumGN69sdea5GTSYpslLX8ukxRljhmex7pIaR6jH3\nES9e\r\n=E4sh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGvWwx5mHS0OVXI9pcw8LSZrQN5B8Y6tvY7Kpno2WKrwIgKb3UhvQyRGCtL2/GBoG7tyQLTa9kOD446Zhr0n22K0k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.5160e548.0_1612569083034_0.7672833606359937"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.4fa2daec.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.aac8f5d9a.0","@material/elevation":"=11.0.0-canary.aac8f5d9a.0","@material/fab":"=11.0.0-canary.aac8f5d9a.0","@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-icon":"0.21.0-canary.4fa2daec.0","@material/ripple":"=11.0.0-canary.aac8f5d9a.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-nEz14jweGjqAWTB8ADpILjqtaO9YIPyHr9aPWL5rnHoplt247b7Tti8o/bpjmbRcZW7PSOjRUbMb40p8xb2lEA==","shasum":"2e4b773621da8e2c539ca4ad577444c89c15f00b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.4fa2daec.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTjCRA9TVsSAnZWagAAHt8P/0H8ondI4IfSFIEFQSoj\nY7E42yKzF+j4t5fJCUKS8IeZeBXsTT6sfvQhuGIRa/e/e6V96XQuGYGMvj3c\nmkq1l+ZVQZ5a2SvPeJ3Jaj0K9b09bWcAm6ly/K+eOlsbPsTr3HU0QFMw6n4l\nH2zjXGsW/x2bkfngOGuDU6WOWjqVT4aWOhwxETCgVojTQXk3H+O69yd0Bd16\nr27cWTCpx6oagbYJ4GE1NEC0IqjFKQ1COhVz2Amm3hVfGCLBziMw5K5RU79K\nq+J+CqyAkeSufI4wzJq7y2tKVFXDEnR+RX13F/2MU07zAJkNn2WMOw2CZk58\n/OzYVvatKu1z40MfUSGAVQJ5UCSfBMP2+Q2Aq9dtLgTpmF9LEodiRUJnYdRc\n+VOeP4VN7dBxz/LIaZQcFif6K514rEwXgX2ulff/K95MDvDXnemq9W/FCpPF\ncKFPDt/lV/oOYPrUPWJuHYxiXJmpMo5454jl01rHfa/bjWwTCGeMYU2MkQJx\nqJ/55SYQY/X+/tKuUlckTjf6qZWytDKJQmnLpw1ts1rCAT45CbrjCyTrOndk\nE/hagG+1/hoKLTnph1rORTYE+TttJpr62aBqsmJiYAgsWpS9dZiGpDpu87Qv\nEP5MDeBVUgemP4KKEg8CoTwaxmx6ttpIRx6FVF3qFQIysV3tdfk9fodclGLt\nnfTu\r\n=dUxz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZgAwnHFcN6UFI1Y2hWoegKX/asDoAXWiHx12qKl7KVAiB/x1vBc+jYor7y7vQ/Xn73ADgr3y9m0qC+TndvFxiYkg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.4fa2daec.0_1612829922961_0.8208194684608721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.67f285fb.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.750e18fc7.0","@material/elevation":"=11.0.0-canary.750e18fc7.0","@material/fab":"=11.0.0-canary.750e18fc7.0","@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-icon":"0.21.0-canary.67f285fb.0","@material/ripple":"=11.0.0-canary.750e18fc7.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-7srK5HCotXv5x03onT95fJuoPYPOYmAeroQXgVBP4dnUAY+V/xHl4DigOl87XuzDIdi17vNByDUj/ZHWbFS3FA==","shasum":"929affbc3d1e3ed7a2ecab0a235265fecfad9361","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.67f285fb.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdyACRA9TVsSAnZWagAA+bkP/Ah+RmOZ3ph4hGnYVAxQ\noXt9zesLEDKx8IkJPWMdCt0Gro5auZVto9CjeSbcmfOWVuyibrDouckklW+L\nI/uWrjS1fk5H4ikZxi29K3QkTg4d+9k1c5pMiql6UCZEzVJbRifYDpdAT48J\n+lqC51r2h5riy9Ejy2qUFah00dbbi3wS5TB8gHbMr9viQMPqwnpFH1zJKzB7\nsYSgDLBZprrM7GJ/uU1cChFgBa8JN8xQlPl5ldXfA5LfkBiFyGKnVPgfDxp+\nRWPbWA8/o/yHXUkN2hi7o2v1z2cpZCotY2X9ONoU4vVGq9bcgtdIn5i5UqX/\n7yryNSuAoXCV532VoDEE4Ms62AI8PR/Z/l+vkdSsLIvNZbWibiAUBUcRiiYj\n1teB7ZNBAT9G8fRJntxlAhHk70uf1fwfWZK4r0qbk10hWVEsPs1Ra+S3dEQU\n3/lco0v4Newzoaqfr7ajHMAwmer8yEPbM16Mevjdw87yTIHdns9Mfc+2+/yf\n4/3C5B0oOiaDYYTQXWxt3Sa9nMH+SQT6RAGLLAm4Bp82zkHzbokCS94QHM9j\n3jNjtoqY8ZYvZS55pfZZP03ja5RdMY2clne479wSeDNFW59kSVQDvj/bSoZX\n/c6LjF2isLSP++43fRUy9ZF8hJ+ARW2MhDPTR5HzGBk/yZd9tAolNBEu3JOD\nKF0r\r\n=UilA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAR81lMNOfk2cxKfuI4Nuq+iVyEpIytPKfKXrnatO9FuAiEA4hjLiJOznzKwF5O2mrfbsvSTg3RW3DpDSpek6Ez2qZs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.67f285fb.0_1612831871747_0.34431676740289374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.58cd5a70.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.b62b1266d.0","@material/elevation":"=11.0.0-canary.b62b1266d.0","@material/fab":"=11.0.0-canary.b62b1266d.0","@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-icon":"0.21.0-canary.58cd5a70.0","@material/ripple":"=11.0.0-canary.b62b1266d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-MouzuatabLNzWEGH4hDN2dm3PdnJ1sPhMV2wglb8fNKSv+zQrFWUmgqdqZVH4d20y665vJFkZEO7f1rDldAitQ==","shasum":"c64e2db45ad1bc5d70ab91039fbff13585588c1f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.58cd5a70.0.tgz","fileCount":16,"unpackedSize":69425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZdVCRA9TVsSAnZWagAA2V8P/0szJsI9PQU4g7hQQBvE\n8zJ5XjxtDpo4gJQ6MtSEOPa/m6gBGICULHkfvWlU43neMGqdJtIe4wJhcf9t\nW+cNcQ585BRq4lYsbvgtx6HQw5lZmC1ohCn693Wr6Vj8Q0UIazjm4d5UJRAP\ncvYB8oUFWw9ptoMuxtDFSfmtXWLmGhs5WipU/+H11O2aark7rLcacfL12trZ\nTd+WhIM0Afh/HW6HQ9XSbuVYYtvx0FvC7SCfRYX6oYeZHABFQ84P8V1UGp3a\ny07Fsaq2Peamg+DohXONGd0u4qQkVoILQjcokGRpz1iwq2qbvRolo/82iTVB\nq2i8NzvFjlDPts8F91Hb202fd7XwxAB+QR+xp8WTCk/5sw8O7r/9MEAMbUXJ\nAZQmVUKq8X3NNSN0+NBiIDHupZrn9q04Gr+oa+lVdV0lCpyt8bTxYnL5qu8+\nspm5BVT7sZVbelMKj1Zcv+rAV4B+VlwePX0Is7+/DRXZS+voIohdVIKC5iEc\nZ14SwlOraqeqY2QejFS7m6qbrJNorDtWDoEEdqMgLPXVPrEZsHkPvgCetv+P\nMeHbilHbi6YdMPyy/aJSK8ztoP/BCqr9uUJSWta1sl6VukhAEdZi4Wh0Rfwq\nPQSxNFJPnENqBbRgOfLt5urq5wMEwaXxGdLJvyj1Jrz7kLRvRRSqtHPd49hd\nnlPs\r\n=/DtU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3o6+oVaLJr1q8dvchSfahZEhx0ynzHunX1w8Ob10ZTAiB7wKzRUCg7nCtBVPSDJKZK55s5z+U1TIRdaYCZYSWVlA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.58cd5a70.0_1613076308586_0.5583394609693513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.8107ca43.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/fab":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-icon":"0.21.0-canary.8107ca43.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                       | Default                            | Description\n-------------------------- | -----------------------------------| -----------\n`--mdc-fab-box-shadow`     | mdc elevation 6, 8, 12             | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-oeNKJz+rlrpTbJUWhojFJTG1j7qOrTrAhFssB+F1RGXQfEOVD3FnZoJyAmv7bPC3mRaHJmTc80rwn43v791quA==","shasum":"a2ec85e1bfcdf97b5144567eede85972cbe92101","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.8107ca43.0.tgz","fileCount":16,"unpackedSize":70959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb2+CRA9TVsSAnZWagAAYHUP+QA3XD7Rc/XWc0PTHG8t\nGZEpVTdAhwGVY44xv3bMgo1WHyrdcec13HSP+60I6ZGVBRBAnQtIXYHtA1Bi\npe9bglQwnjrve/A7eVuExBxAuPWxL6tnNJLYGP7avDxMkvUXcOVct8htlup9\ns4fN/et/jtaZaJJYp23KaGkCtylbXLhHTekwGVsD71qw/x7FaltZXC/k0D72\nvn96ip0nQ1+XbHhhLUjGEWNJWx53duYkTqwFKdtoV1UljIE32taOFZDEiilP\nfnzoevRMjtjh+zBp13NrNdqJZL9w4Wm6K57+kylkq9socmnrNqlgT4MEBaYv\nzcXW1V8B6WXaI+yVCltPPSKyBSUPJhtuYECneawXP4EMAFtPAIPxRVVLOAn9\nDNmEMUVokWo9OC4aC+ryg8X0+QYogUj2yYhG7PqBqEDMKy+QMxGuBadI+4ko\n8ldmS+o7sgwngKsi4rGI7eq5V09Gh9CjpYEVdXtKxTiGSJ0Exgv4k8Dx+vTG\nLmuYx57nSgdvcRkhABmZ+zPhB55v6VKvj5VMlRWpTldSNoorKLdYXRTna8CR\nLZddOk+M9S0DwLE9Ij6YGQJT+XYHLj2KR5Jskx9gDAJVQKkFuILK+ndNooJB\n7sYbcMV1aha6mXN36kxT6I7NG1Lj5J9BWhb4vtT5s+CXgE66P1xCvLsFm44E\n4ihN\r\n=Jl3U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECoMxyoMJfiwuIWC9vM1zfLcxPjTWauvOzZw4hoCc3pAiEA1TTkqgZkPWMDXuM3cXwaSZICKsvcrM0pVsCk5+VmlJ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.8107ca43.0_1613086141752_0.27415856036693564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.d35d64ef.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/fab":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-icon":"0.21.0-canary.d35d64ef.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ByyD9uDw7hw1BvK8012ced5TbQxYtpgbuz/XAiZ1+jdXzOO947gVSYCqF5kxJNdDFn+TXJGtv630097dTjnRrg==","shasum":"7a1762b6fbb75a5ae24401c16acc39282a8dbeea","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.d35d64ef.0.tgz","fileCount":16,"unpackedSize":74324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEQCRA9TVsSAnZWagAAptYP/08BXRlyNTaV8xh1ynIV\nwB8kBLdoqYpL8kHz14O2W4FuN5Xmf3x1welo4Xs3icjp+CC18HhO3YxhtR1H\ng2Wl9KhnW1PMYIzD6DMw41MbBfRxpJLpeb3CUh5Cum8T9OYu8oKg82x4KJXT\niDJtyNFGMm6rIKLNL+d6qwfsJh3tC4Rl898ofgQmBf0FrzsCnrIoBRMoyPCY\nNLO+VQy3IyaQhZawigJSs8VkBF2x79EFse8bwN/wpcr0k/wKsivmUXBiZOOU\nrFLT5qBMUpYfVrTsMah9XfoTHMN0XhCoemFzn4g9+T1IQW9Jd7RWWhPEXEfU\npljkXAvexOU8GUkxVnyI7+YGancus1iZR8sWjgPHCQ1xCawTN1JbxKQgulLg\nSBWThyuTkwdEPxKGjm0QM5M0GrFVD/8JPzqe3on1T7WRYMDSFSEy+7/ivWPo\nl9jW6aofR+euOGyknjTD6NyACz+q7nTzQtdWqLhg2JjszDynJWtlXzT4fr+q\nQQBmDh/kH2gfcpdbNWLBUHwo9lN56KiSdfT7Lh0bgjUJGQxFoprpKdTr6lQU\nu9UYPEEN4JV55/eOwANvIP9zVne7CRTGBUAw4Xi/lAiF1tlVwn0+DxDskiRl\nd4gtMZoi5dajvg8NwRWtOHZ5I+CQlUjINmo0w+pZE5rPHqIhS2IcO+CzWg8Y\nSIum\r\n=zzpn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBrJbEzgfTN8EJWJJrcyBHZQHDRKOBofxxrTaB6ent5WAiEA0cHcFfHgtiSWx11A0Q0qG8u2X7iCmz5Ug8tMyqrjHtc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.d35d64ef.0_1613086991641_0.17127499664871326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.78bcf058.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/fab":"=11.0.0-canary.a6b3101fb.0","@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-icon":"0.21.0-canary.78bcf058.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Q0B9wmhQsS/ti3EYgTYn2VaUh78Z/5bz3txrgIqYRxsgP+jrOgWfHD+mduDR4Rq/AnNj1Q0U6HOtZ78IRrTshQ==","shasum":"3a77204225604447cb4060e4fa0af3e9fd1b9773","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.78bcf058.0.tgz","fileCount":16,"unpackedSize":74717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBbCRA9TVsSAnZWagAA+k4P/izet/Q6TIl/5ltmqufX\noTZmo/MwZvX1CGO/+7xNJ+BkkWqPiyAysevwQl+c8evWj/3VwoidWpnAtlnb\nJVWZVCw/FdMAgFeXQS3G4LYLKtGxjfgZHYKDg3mlGabllZEQc2YVO1gOP9jA\nbQxiV7auBK/x5c1Z/cML3mDh1l5U6hwUAIMzgSN8Wybyl/P+3zRobu8lPVrl\nT8vyL2CSKF2JDOHQz2M6GyoIQQMmOpZsrXzcyYjIMOt/4S+ODNiBLAL9QE4y\nmBHDf/F0gtHPD486UeF6c8i7hEAqral5B3wh9mBRU3ShjFu+EyX7096ENzGr\nPuLdK+prsibd8oypoqjSoRHK5bj0ZYdM17+qpPUgw9XpFUo2cLqvg40s7hMw\nl8mWskIagfEuOeSMQTCg1VQmsZr1xVghf0yvYIx588vis4YsnGrsGwYLueUs\ndKUWwQBrnh2HNEOXliRkMpVuAwcO4+dl0uOZW3lW3Z8AGl6/3qlhCrdnGKUI\nmQLP3D1T6tbJDu/xbVZMY9BWUdbcv61QuTdAM81MQ+labEEInPTBm7Ldwzdr\nEnskcdjPX7d2Y0RXMw7Xca4ie+UzJyUclUhpzLAcoswNU2Bjzl1mK9pyycdW\nKcUTz2pDfoBVkF0VLL7pdPm3wE+WjfYdAU0GDJ3RNOONmViodx2pMU5RgR89\npXQX\r\n=Ytr8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/f88wX1nFn3UwIDCWwTKJtPxHifQjw2a2+mRwpd/WLAiEA3upwkc38AoxCexwNZ5hGtENNyCbT7av8JGdoitEnLSE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.78bcf058.0_1613090907308_0.22650057888003117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.0c6908fd.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.ed88df700.0","@material/elevation":"=11.0.0-canary.ed88df700.0","@material/fab":"=11.0.0-canary.ed88df700.0","@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-icon":"0.21.0-canary.0c6908fd.0","@material/ripple":"=11.0.0-canary.ed88df700.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-PkDtLe2Kdi+FMmpHoGZx4JorOc22/5d7+tKuA0BqHX3/Qgh0pt/L/isLuzBlp04v5rCs4iY1HBoKb/8ncSf2YQ==","shasum":"2d0da2a9420ea5a7a805b3c016e5b2e5664ffe2c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.0c6908fd.0.tgz","fileCount":16,"unpackedSize":74717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjrCRA9TVsSAnZWagAAkm8P+wfuKccBsiQQt1MELtpG\n7QEo8f/tYB7lukWQZYeBqH/KBVzq7qbxw68S9Qqo4Yb2cz3oFBPwSdWRb8NB\n1kI5QhSGJcU1TRna64C/pddORviz/1eIuXQSCtbiFjdEwx+7LrvLrjis5sHY\nQ7Upmn6N3yfCJNwqMhE11Z2wAXs2NkRfIJ/CARjEWOTUVGx3iN9YUuhduAea\nGPyxQZJ0jvKM39QiMjHQsdwGFbAsPm4uyIRJFCLUZrYP4KN1r1e9TSnGNh+Y\npUfKTpdQI907gjy/Tua+U58zy651o3pdjjsa6oa6yXWMpgBtCu4fJ39uK3Ln\nsDAo42tm8cAghcvZl/NV2t+sbiHi9pUUxu/UewaJOLYyfxQk2xKYL6KT/GPO\nCcnhLwgMj2+78IBJzg11JN4wAtblT6NB4UdhelIN6pMzBo2/pMsWu4lnpp1M\nepKOZxG2FFE/SCnqJYeMYNHTigvrBsFPgROUaXSUa7JYnd3IhydCxjv8iFw+\n5ZfYqVIwDp3gSQEueg4qOEWLRddPBvAWOKV/LZQn6inEBJK3C0VW59K6Cxt4\nJa/h4ktwP4hrtiTxRtfeRoMJxnkCYtTblDXF33xVSRdtRd7SRUR3/lati8jL\ntpwnaaEVOt8yPLrCc6N/8fiIKYxONUzVAGPI89hLdDk6JlTb3GAVbK8MS5GQ\nMiz6\r\n=peYd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwTP/sOYP+Wiev7r/xFnwBvdan6Rn9/35fzejdoks3KwIhAITKF2VUw7dq2TlZ7w+08YdxwSfYYmkmHL7hR+bLxOF9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.0c6908fd.0_1613093098723_0.7800429754246418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.f1f34ee0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.71fe9a067.0","@material/elevation":"=11.0.0-canary.71fe9a067.0","@material/fab":"=11.0.0-canary.71fe9a067.0","@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-icon":"0.21.0-canary.f1f34ee0.0","@material/ripple":"=11.0.0-canary.71fe9a067.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Ac3tHj1/wpPyIk5CzWjgp6UZ5DnsnKEAzCtJ48gQucVwoRxXAkkiT9NfdqeSktCLDRmwmOSAJF3+PmlSZqGZ6A==","shasum":"0b0ea5d9564fce7007c7567a47b64bdb8b802b43","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.f1f34ee0.0.tgz","fileCount":16,"unpackedSize":74157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKBCRA9TVsSAnZWagAAAqAP/34YSyIi7PhINBYejCOs\nuegoPQlsRTTjawZgNkvGz0qWvvxUPe8fMgHkACUl3jhW+n7wtkPeldFdNMKu\n4meOVzgT2aQuGuRI2OMmmy/9UZJW26teq1ob1iEE50qh994/rye3K2/D+rXw\nFBWsqkI92OpvnAdd+N62HIaFHTdH06QWudW/2jyp4amtHEAc05lMvwhaNVVJ\nMIwi4v7iilE6PAtFEog1JIPyfD+k3Bmng+omNJdqBTkxnF+FGRsKMR43d7lp\now6ACfn2siEPDdoD0HhtdgsYC0bhzq09vPabBsjd2XQPbbR1Sk9AVhR0JP5K\n6hV4VHLV6PWT9B7ilUmPaIbcf5c8aNhZGQarOa5DWJrxytT5K6t40oY/PnDT\netupQDB9tOEZbwfFOSenc3qu7YC/d/r9IbSUzPSxWnlRs/d/qyAGYoflBA2b\noQGiBAiTMgq0DzcfXDvdcPMrVsyyFbkhjJEcY/qwn34QgjFFZRH7Lan14A/J\n8I3DWgGYjNQs+WDxBdXZc3/96QLqfKmQEvyselL4Pur6H02DhCo5BHEpVCIE\nRg3ZWooE9WB1plYWPF3gCI6LihdzK/NRpLGGJgtq0ubdXCcnPttUjBZU5CEu\nxsJ6RuOrTPV4dbtqeVbby0zd8imDxYdUo71jH7ONItI9O94+B6y0uiRg7oem\n7zFy\r\n=YrES\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrQVMR6FYTRKqVeXUTmTNvTA3XNIXY0Udt4TUhkEzIyAiEAzooODALofsu64jM6hevxt1rIVB77rUXMImc8rsxD/L8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.f1f34ee0.0_1613161089006_0.7534780385476363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.d84df029.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0fd56a86b.0","@material/elevation":"=11.0.0-canary.0fd56a86b.0","@material/fab":"=11.0.0-canary.0fd56a86b.0","@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-icon":"0.21.0-canary.d84df029.0","@material/ripple":"=11.0.0-canary.0fd56a86b.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-jhm7CmY937NfYR1u5V7/XcmQBKlSWORnsaNvRFXtfHeHgn+s+H+5lB4wOhKdvSvjDKxZ5mzVWS/+hwEC4E1g7A==","shasum":"ce99ee797569d75d45dd5482b40ee60d9bbd9415","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.d84df029.0.tgz","fileCount":16,"unpackedSize":74157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBgcCRA9TVsSAnZWagAAWCgP/i4Ebd65dEZOPYJcLHTm\nIiTGe6QDg/C6WSc8/gqpr0SICilgXbJGtMpHReqogL+XQdBDhr8k339+TriE\nqMnXDDwQFbflpF2P9vyPtM56AcQcUIl1rIwvlETk4VIJWYvODEKgICEpFV09\n6KJmPbsBtrrGsXtaitW9QqOwXsFmZVmqHCQ5hAzqp3GC3ODJqqbM+WvajGwi\nOho6zT83CHmJ7L7lhPIvIqE1n7WnyLWnpsEE0zI8dVGVdLthDsjzkGhMKGtv\n/WwD6fOGE3T9uFlUweCpma3Lrl13x/7y3FqaxUcIa1lJg+iC+PjwDafEojQn\n+SGRh4A9GdwwB6gmZetuCEP7nVaTfEI96kHj1ic0HlzNlX2k5gxzqReG0tay\n+Mc59neYqPBTVkq+uayU+ZO1BUsuPKMDhDzcvUuAb/bXqDSgVcIH9P/ofFAH\n+tQa1Cj61ObbZNvaa+tYbokMcrgjqdpcfmy4iyB67o6Vssvd1BkKiXHqWzZ8\nBjoyUgsKNYyaz4hP3UlVsAZ5U0Z5RsyTnvYe2v5yTHRo8bHNKgJcUIwPAqIo\nFmjU+eIGPwVoNjCwI4Vh5mmm/F23534pgEzCKPKEbus8IuqcEoBPX7a8LC4c\nASw4uJ0LLPz/xLUuAODuPsSuaSIrjvt8FMX84Jk6jpZf2XdVRWCAzWMceh9V\nLquZ\r\n=+hn2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAoXp+vA0H1EJ1rDfdlW/hyfCkDSx37lbH0E39PtJ2pWAiBMhMP0IPJII6SclghH7FiFfEvJZC2Q8okg/Hepa8CUHQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.d84df029.0_1613502491513_0.8960203682105372"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.c525f471.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.f9cac96cc.0","@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/fab":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-icon":"0.21.0-canary.c525f471.0","@material/ripple":"=11.0.0-canary.f9cac96cc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ALVWdgHtnQVUIwuoXJdoKgqZZRJTw1tlIph3yiOa0RtqCTRSNBmjWKWzqE3LTYOkTojRbmr6d8z0oGNnldDD1g==","shasum":"6bf6ba426d2c4aecde43b72bdf6020f9a686b288","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.c525f471.0.tgz","fileCount":16,"unpackedSize":74157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJQCRA9TVsSAnZWagAAEK0P/RbOuRI1D60wUvJhWvsZ\nblonUAru9KLMKZYyFTAqNCm2X1ouUldZz6sbOvBMtnDc6fBPkFA3LdpZVuK9\nh5//vZrPaN/1fQ7SydP7xwj8pwTwEZSlhdmzrwc3pXTuTfk6lyYbGPe4r/E5\nv/1WAtuuZLY8+YfjyvMNLqRPod5ZKDKhHZ3DX8Nys4KHQ6/cKFt6CV8mfcSQ\n9fYwUA7L2RbZRNuGuzb40DhJP8BDF4LaH0Xjq/Jnw8URMq3zazwwhD4Fcl0X\nn8qVoZ1WpFVLqPgjG49CccIuAxVeyJnxKxHAmc23YoZUSGzbqwwVlA1bd+46\n02N24IVVTAhVazevJkZxT9MlHUhF46XUlXkRqBQaK75EbhpBTAxAWBveyiGc\nOA20Na4ZiBpCC9MfD1ki0nH8YBFP1IbjfoXade6DTprbwn0Xxdwmmovg5GSj\nEDtcY/e+Fdl48SaR8L+MwmxxfYKq2JDFomiApxZyO/CZSzp3PjJ49vlqgnhQ\nP5Z9OESouEFLeN0qPz/YHUMn2SMuLA72+qtbZ8MMq4l+SaMd16H6n9X2IlLp\npLr7itwFbYsjO3doyFnmUpMCnIJbUDSVL3ZSxutFIExH3AWYJ5BNWnvc+lu3\nn786phKUPgx0VTjZiPNiTsveceDWWl28bOcUMLe3F5QJ6YTBvT6EmMt/xhk9\nEjTI\r\n=fo8J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfA7x+6MCPMKgZGFLdSNRup4WrdPH0WzpAEk7gR8mFfwIgbMlFvQVKnakOdieGPp/VfeZI+TFEyFKWMs8pDDlrRAg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.c525f471.0_1613595215697_0.6993061824210662"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.ba7a1b35.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.f9cac96cc.0","@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/fab":"=11.0.0-canary.f9cac96cc.0","@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-icon":"0.21.0-canary.ba7a1b35.0","@material/ripple":"=11.0.0-canary.f9cac96cc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-p/G+nLFOUH9En8FF4p5VGZ3AZmOMIAu9weNUwpiKQzGpQrU7x6BZ3szBCUYe7AktyB8yGAceKNLmd7kDYkMJKg==","shasum":"7dc2dad8743c4fbb4e46291e61a313ed4322e8e4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.ba7a1b35.0.tgz","fileCount":16,"unpackedSize":74157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLJCRA9TVsSAnZWagAAjr4P/3WDu6x/eZ78qerXFuHI\nrcUnBRIeu3IhsU/LBN84+kPONJcYncr8IBKM3Fw822+Pdn8rTGEoDQsSaKLL\n5EzvfUIUE1eStrURO1hWlJookjHA4/wAZZ47IehTPZ4PRhaRqNAaFmmvcghQ\nPrt0aKgBRz4uN6rSgaJafmRZw4Jd1EPilpFMoUlXHr1UTvXNmEBelhFJmmYX\nLdGViiwXoNvrGv5zjngE6kngTHIMxhrJxjxtnYKjCKBzL4JFk5N/TvK+Uzs9\nhmfXnGTqj/JbhObI4HxmNXA2A2WHGZ3M/e0U+f1IZfCIFOV7nm2wBgnenOur\nJ+30EJul2NttIPTFxMZ+x57g9Kq91tKaH70xR7zBzxlvIWioonXJWU0Z6uzE\nGRwGwV8WJofb/xD/X63ehJdqdf1RE1Q1yb1j0pDQdNnVgYpNWTiwFOtvBIDd\n3CjE3+NVgMYDn0rjY+zNBVjX/CJg/EQBCoXLE45zJ40qWfHcPD8fcDT8Fy7I\n0AwuXcPzsA44+8j/6Aum6sRt2d29oYzt4C2/sVe6SsWPwRjFhl+I/azsciUy\nb226aT9pFzpG51bNyKd/vk+7YLD3LroalS9fczSaExOShPSQrA9r1loXhSb8\nG9xUXgyYjTBWuwLKCsRc5xMKKtAKlOJgVLXkPj7F+2hNVBZyGAvtNCqp7i3V\nl9Ig\r\n=faue\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB4XF8v0Efg+cAQp2e/VwOdNLelrnfLpJ3VDS/cCUNFgIgeGOrMmGoWxlZGaLd+yQ3qMPBPFuoVjgsU7viPO/TDC8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.ba7a1b35.0_1613693641037_0.49620062015823363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.9a566dda.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-icon":"0.21.0-canary.9a566dda.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ryVH+3eC3zctf3POs9alsrfQ50WewTLT1jPsrYwIL3P891xI1boLfTWNRyeGXwSeKZ7wlqTBU/LMwZP5ef0pYA==","shasum":"40c9833850cc2f524cfbaee3231cb7010df5ee56","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.9a566dda.0.tgz","fileCount":16,"unpackedSize":74337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWQCRA9TVsSAnZWagAAnmwP/jEOLttoi4TFZWIpyO8S\nNVUZGp1jOcJSgqt963UgoW5J2NUNFRhHFZ5FCe+ZTBNuhpmxm0QjeKwUmj5Q\n7FTKYeAwjAFL2dF6fhj+aNAuPFl/xma1mySfg2KnU1yyDc/YN0EMmFQgwCxH\nP3+LVtyv8XZQITCETCimVJJp5T3crCQL0CZGt76mx7POaa+n2s21z+EERUdR\nEl+Ht3MXcMfg1FTPe5xp/sVmM0nhKYANbvOmqorOCCXg85PejrCuD+uEzzXa\nxRr29FHrcs/qfZhp57zP9ZIi+pCiheKl+JPQB+nANDIUKlXa4lhFPrS3IexT\nOLbADZD8DSxWuoAVJ9f3FC5ep5cBtqmljV2YQnCVWfD8UWXy1H8HKV/kFBwd\nMhJBb3x1b5oV4ovJA9d7XPsOWiaEMoVSqVHPHz18NJtVd27Rl8hlEeP2cZpd\nuMKWpwpmH4OWphSIAW2MTp6sxrFQGt7+VY4dNnAAADFnVwvAImFtRJbz8bGv\nNGUpZXngjXukUUQ2nZhCn2YHrXSoqdCAhadumsZzuqP5wH6SGq8N2esewkaq\n5n9bNggJYDpH6Qw8RsOy1LEIm0ECw9WVwGsNE/WfSYCeF1FjkLURL21BrKPb\nHssDKPvKUe5/pcOBTqvlBfW8tX6Tx0vFtj4g07rWD4JL6/w35raaOjekj2JI\nVxz3\r\n=4l4A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCe7SD3WDFZ7mnQAF9x9e30K2wPACI23Hr1s2gOoQIr5QIhAJyG9mtFBGr1013QPLxvdHG8TjyAI6KgToZjb/4zeiRw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.9a566dda.0_1613759888139_0.2825120450345686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.55addb8c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-icon":"0.21.0-canary.55addb8c.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-zSjxR+8n9D6/LE0QqHYlxzXtgToVc+QhyvfS5DfmnLOdfvkxB799C5B+AJLLAhmxYlMhpFlbuameCNrr4AVxNg==","shasum":"4f2aadccc2731344ab94781ed346e9d406c908a0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.55addb8c.0.tgz","fileCount":16,"unpackedSize":74337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVvCRA9TVsSAnZWagAAA1cP/RX9NvbvY8OXt/pZUj6i\nKfs5FuId3NkvPD1Hdd14zS3oi+EFQpRXL9K4WNmoQXb1Nw5lg8DqYxfSChOe\n+1+4rDk47+hvidF7hob3CCmJymn8W77U4phMRHmLUYAV74kz/lfWlZYUURYe\nvRdJHHe3k8mH4LHgHO0S2Zr660OrBkK7YsdIs0n443GyHP6Bq5HCcc5A3SE8\nO7IC4O91xzuIXNxlH4nQ0N7mQxgWr5cdihcpu57kFRfEdYVh3xK8nzXtlx6o\nvAAIZXTOv4o7aaBNl/Es+e6RXgM7ZSzgbKf+cVv5+gtQ8XRUQlE2BvdJQuQE\nNFQv+MAs/E5ripE0TU5+x28OFyaFuXmHifww1q0Mp65P6CgRrlZw1yeDp6VV\nRAXPe3C7c1vgflJpzp3UfxQiC+FilLfEGkcnDqTCGu9x4fpns/XHUbEjwMZ9\n9SQJIYgymfdMF53BU0zkGId4fw4RaD5BJET0W3j16G2ZWlJoUM9/Af36KMJt\nlIDksMVZKPKo2OtgIFHfAbybBdRBO7NkxTcCT5uxA8jZh3EluHicXJmh4ivJ\n9lcG60akk8+tGi+8BeOndbGawsBmOf7aBsa7hhUO6f71dyUWey/hGNiDyetO\nkJW3fMc0LHrdb2SMLLVS2aXmy6AfFURejLzShIpOowxuLzWRNSwMfkTSVoby\nPyil\r\n=ijBA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH0tYjkdxyCRXAk/X3IipGanv0UI126+f8cq/+ZuutNwAiA0GJWBvL/b+6zeBZ+dJwp6KGEEc+fijBSyclcAV3oOhA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.55addb8c.0_1613772142968_0.8053701622287164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.85dd5e9b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-icon":"0.21.0-canary.85dd5e9b.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-bx432vCDKRotx5vP9eHPevxqN4FfZNamSSfToxiofqZs4WdAEbrjdXO6saDLfaVMfNDVtNV5bZtpSGslwGNoGQ==","shasum":"30f13bcb784aae51a5a6341f6d01ed8ce7c99139","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.85dd5e9b.0.tgz","fileCount":16,"unpackedSize":74337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYsCRA9TVsSAnZWagAArrgQAIUyonpgroqeB5NaBmu2\n4LS3aob9WbkcUne0Q7I3MB0nioIdODLGweEY6jnGpIdnQqzLduEtD9JkIe6M\nEDg0zkhMxQ3fcAdbs9KVenrFbtnQch/uvrPgIyCEtvApMKF3z1l6/HapYzZu\nQEUkRUdCIvyGUOUflD6E7QWUE+Fhu8m4XM6/kNnpXt7cPTjklr+bK3u/H1uz\ny3jvug4ZkvK/vY/6DVGG0sHubhzbOsZE5FpewYd/RC4FIRKq/EICkNaa5YwC\nREUI7usG4L8f5bont+S1KYtnwpl40oZTv1pIRcKXDJPdBmebCG4tsP8x6xER\n5WudfWVApUFZtA9UopmCvHJSr4JTFRgMHuk+WJSiqXphQ8P+wGsQtUWcWAqX\nyqftDRIJtrF6tcScqZLQvrjz37MqoIr12J03ll3/Jg+al/QEJqvWYQpgPC2Y\nz3rJlEtQYLO91b4hXocQlDFkn/PvjYfh+sXekNeqrU1vvWf15C7vvrlS8pn8\nxBjNMSc9vgfHFodttuVR40UDB8c5dQ8qDhk1Wa5X3ENrQzeWzQGbjj/L7P3E\n4DqusCdzPjBFHbAkYtctn5PSBC3sMmRHiXHanAcqG7PZ6Noac9HpATwJN+7+\ntQCTjlYK4V3lJILHPiLsi2gRRj+jCXAlkFBiRPBzYPqEIq6nqVOSnIp0t6ie\nHIDd\r\n=f2ca\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRjqjcw1IFXiWRRn9mlapZSJy+waQP+oOOJBCQKfomZQIgf6JvIrfVkBTgf96Vd20EA6U+Aq8a5cUOjMJXm11pJXs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.85dd5e9b.0_1614046763946_0.5394712047122081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.aa3e078e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-icon":"0.21.0-canary.aa3e078e.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Yi24s+m0RiTe/vAU0YVLkPVXIdRkRCUW5UIyxw5E1X6KOlJFaG7PMSguVZOl7bL05yQrBO7pky3GeUjv0Bx9Fg==","shasum":"9c7ecf79315e0cb24c3a72bae09b124336189ace","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.aa3e078e.0.tgz","fileCount":16,"unpackedSize":74337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgcCRA9TVsSAnZWagAAVsoQAIuFZxedpIwzn6SyyA1b\nDFES6bysG9eUgKwSpZn+TgRbIbxa5uuvp80zwpveOu3Goq573aH4h72fhvSC\nwLngxMEVCY2Y64yuvXVk+mPd5SEieMmp71BltJ727wV4tKGSXMRTSRE46Nvv\nxC2L9gsk476hMGRRtCNswOxA12I8fWW6wFdrueGxebVdRAgHhXS2luAYKmpm\noe4zoFCSJ5U+39umz3CbD6Y2ypnj9HjmpSpQ/HgA941TXJgd8FlHtycl0ygK\nRGycFUUOHqDvQWwY3NQOmdrMM4U7AEvrFmNmsADUjEkm5+LjgljGtwMTZa6D\nz/K3bO1noQluXxyrWzuNWcnvOWOGzc2d5WI6zhJGnK1QOQ12Eul4d+ms9Aiv\nqMFqv3Im4sSbeRZRsIEeEZLs5h7o7O1R3F5VUT9d2W+3zqBtS7HpRYjm0pzJ\niZrbtbJiRMdUaefiwVQS2GMDY1GIl6vRnH97pj+xyB1zh+knGZNaTC/EYuab\nLXlcLJ4ZKnCMFHeXJkYNl+36UKEBDEEu+RmrLbCNsUJ07K0YKw45pcafYcbt\nXJr0dkqmyrSDOloNxJXTLYdvuZlxHU6Ao5F38xOA1ntQE3o2F2pDTf1rQhoj\nZyBBwokuinnLGz/OfsUnxm6PrxRkRWqdL16+zDmn3up1i83M58/qR1ruy5HQ\nWEPM\r\n=SIPr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEyCOo5RYldwaf7BHVrj+SNSYRZ6lKDaVmQ3Blpc25+GAiBAHxu884mfbi856HQYA7YrcatH2hYH5dgGfvtLcHhbsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.aa3e078e.0_1614100507781_0.5199234484164486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.dccd254e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-icon":"0.21.0-canary.dccd254e.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-BwmKrreT8r+KA8yLPxOtNEFMl3vU/Uqe+qFSYkF/plm4TTXinK7sqZ/Ma8BFpz4X1+J5S9wL1YAlIyeCUsMRQQ==","shasum":"30d00b4af6f28b8aa65fbfe7931ca9d422f9247d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.dccd254e.0.tgz","fileCount":16,"unpackedSize":74337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWO7CRA9TVsSAnZWagAAo3sQAIBaovlFcWQz9Wn5evB7\nbXO3fPgGkJqlgYWZy7G7TJY2YF9630Is/WqyZzFy0Jgizopyh6RvXACXvXj5\nLxOd7+N3uowcIfmBctYtJABtZI9fPN6YtJBaMmkH8ViXIIsyHRoeY+li+3xf\nQqLMXiUnRKTEvEMOZeyyS6Z7vwpVe31jmFv2ADNhrJIlVIRPIUR5aweOwsPY\nkDZ13h+aU1pBROkC6lpx0pjYLOzffwCU0f7Mhqh9Ao2hKdU7+RQ662GvPbW0\n1CWryply/3d1X7FGqx44vmHHLmziJXeLmUEisCMrPgtpx8rdz2dnD5Zt3uqv\nqPtYdeltbcWlTEosDtjyWZ49xCNI6RvQZi8i2aqoHF1J90y8RrN3OTBMOu/v\n55t7TB6tTpOjVK3V87wc34Mi5xhAaM8lJHKDjo1Ehw4HpW4SUrAmqOmWhhDz\nxuDAAO8jQhEj1cLCTSc0PBkgDu0yWJOfFeB+nzBzCr131RRWQUTYFBib4pJ6\ncyYDRLRTWIzxO9dLMoupn27w/q9DQAtV2Ou6jSfn8p+53mbiqLT4dRvwQ9np\nhdf0r4RIBhK6xwBAvMu8vmWg0aAk/fql3OSoOegoG7dS1b4JueJLtxsc7DRC\n/AMkfN6F7H7stIVn4cU/iSV0Ybg4qMm0q+CQhkQoQxgdEQqHznjPWgBQiItM\ngabe\r\n=Q/Vs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNsJwkjMh5H3Dz0xwZ0c0Ys5Fq3h/af944c0g2ewP6tAIhAL4dB/50i9Yn9cX/ZWDj+e8h/DSoRuz5GEdIfYnsHTqa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.dccd254e.0_1614373819408_0.5536655627012943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.7dd1a27d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-icon":"0.21.0-canary.7dd1a27d.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-7oewF4SBJwWjpzYVOEK/tUQ9+jN6UWvAZ5l3ojBVU0BEmiuT0Ijq0HeUqXtC/+sje2sHBi8JBrLGewjSPI5r7Q==","shasum":"7513477908c3d88d928581131f51e6e6c40b85cb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.7dd1a27d.0.tgz","fileCount":16,"unpackedSize":74679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQrCRA9TVsSAnZWagAAvNYP/36jM07yJZ7R1zDKTRz+\nL/dvKcHJaBO1EOqh5vamtb8sA8eY5iM2Xv6QkcI1cVxX9hFMT1wsKDsDywIH\nfwTZ2TSOfIVByEn1cJEq2SuaPmRJpCFe8unERbhNoz2eQiVingjP7qq/g+95\nbEVHX9Biie/S4MQPUqLHQMFwnYB8WKA5quUMk/dImdaCHlV1DCeN/wth1w7/\nCi+R3qiJbpRFiYyL9jWRFYcxp2+pfEvNVA7PaehsUFlaUa16C7brMiQfei++\nKGMZadYM6WfL/xl+al4L3LaAR5QSOG4+iiNxCZq4AnzwkJf7wmPzwtv4KM/9\nHkM/95MPslZtVFpE28URyau53n3Nv1irtrO1r39g6T8ll+eyD8flOQdMNBPb\nZMX28n5jEWeyM2Gg6I0VvKNwYeCE/ic2OxVhiIS3gSF3eGS2FxsKGpBkDArt\njvXRu7CN/WnP7szRdvciUkuOyD/SCIzJ1BAeQUJkUsO4UxLybrn2OimFCb7P\nGOe62bPODFXFWz7uxNYmAORztFCznteXaFdyFBRD1ENGsZhhXZLFQ5BeSXvY\nsfrxaOw8zqyaFmdn5eZs9ZxRporq5m9qp7FAbzqNOCg0cpBvXBX2cg62jPUp\n07rli4w8XkhMxNGuihkSfHEm8IR1xeiCzApSTM61S+GZTnF2Il1akGL7ZnQ9\nq8oT\r\n=kDTv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMh2dYdGwou1x2MFDaDK0KQQT4N0mjNL4fSk+Dgk6hAAiBZ83QA2WrurqIQnK6c9B8spLY53HB5IdYpQnovYVVzsw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.7dd1a27d.0_1614636075093_0.13256246314086995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.12574572.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-icon":"0.21.0-canary.12574572.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-KLHyZpMLEqjH9p44FOEMCV+WQSo6nDvxFKd810w891yg2rezFw5rIBPXQ2kwjhgp/yiY9PdbeljnNYnIF43zzw==","shasum":"fd90a177f51eda878cc6876bbfb98411bac3135f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.12574572.0.tgz","fileCount":16,"unpackedSize":74697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAsCRA9TVsSAnZWagAAogwP/1b84NrXQ2tb03JKH7S+\n9blQPKClL5D1h0TTb/rcWh/foF9zXREPHaFTVxoJOIdvZlaiwhRi+BIhCEtM\nolblWVHlt47CJ3FoorZF5Fum3FQ71mzUJljezBacCYePWqRuJQW7TNfFAt3c\nQ0qlDDgzRe93GJ5qFfM8vlj73Y0ckDkGScT7w818GBJO35QbNoG2WaXWRAeO\ntG8vsIXS47V2K+KxpOAPwjOvrT+jOS4mdHabg/F2XkuWXZTNpZccuq7RSxHo\nt+vV6F1O+32r0ERVlLi23lj49l6G94pJEv+3xpkC4NoyrQsX3xZPq55FQyLR\nWRtBijTePeeFsg7z0CXVWSGDws1s7H+IS413FcdXNZKJGPg901Idwz/oxsNJ\n/4CdZIvsTJ5t1nAFD2Tyk4GCa9eDGncoNMcvoLKuN6fv4faegi+FCnpX8EzF\nQneCVhfZAUkn/fEByGhGRC++3vzrdupscngJDYd0aIHFCF/+deKDvrKOKzi0\nrGLxo7Jua7GPh90J1LFVNauAQPNkDknQ51N1C5b5k99Yy/lClJqionZORBnc\njHxJ1uoj47gJMiOJ6rGn+xXOeE8xgfArzu3dNdY/zT2HQ1gD09y+wUFEae+j\ng+mjS3X4T+gtKo873U8d1ZE7UZ0cr5AqHEVyTWGfZme9cYPIXVdPQFjK9/AY\nv8cA\r\n=EVvg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBu6BU4RpRL8RD3DCsqAJum8gscmZFrWGmV83L66iZCLAiEAjkNXRHS050Ded6d1yyGH0PNyaSEd7C1ZBW3tG2iko9Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.12574572.0_1614716972381_0.988384204881976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.1109a3d3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-icon":"0.21.0-canary.1109a3d3.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-6wGGEbC3Cj3jJwr1lvIAiiFJeme7LnBD53vQKYRrK7Hb1LljakWUS1Pk16mcR8FRCC2v+vhiBh2FaiGjbIp4VA==","shasum":"33e9b4e0a27c76f42af40361dc36bf50dc18920c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.1109a3d3.0.tgz","fileCount":16,"unpackedSize":74697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqFqCRA9TVsSAnZWagAAEE4P/2RviPMdSr/nDipok4xl\ncOI5jUUSKkdz5/H0FPI9eyfuGJkJTzuoDVV507nOSNQXXZGVx1nupkPLkRhS\nCxykL6G4OGw+tdyBSP559UPDjGkkCc47bktfaDaRr0WxU1z3sRQRt/sy4lw9\nxgY4m41aQXjJrh1XHtMsCnHD7saDZoIkQB8MSuhgJwyTG2veE2fyUphA+w7l\nWzChbi1yULLl7IYcrTbtF2PTXfSkDiuRVI65v3cUeRoBXATZ6q9IWhxVNhnl\nqAlKdj/aekjvUg8BKDUetRijYpwTRkf3P/gQWe5yDnUfYLONAnefxR2eXwoM\nVBh8XyzreG3lSJz6WjWt6Dyvh4VGB6laqGArVa1+5Catl2jUpNvojAbrUuMi\nHReRFiyUbFEHLweujCKLCYKC9cEKDJhKGpBUu7syPLynWkzXc3+50bLDfung\nBF1sXgnoj2ES6jNNQ9y8BaVtJAGVL4BI1ih4d9tZBwfPBpakdnbMMyDKuMwo\ndNNLAcXqteupiLcCdnkkw7bNTN+s7zJpbkdTHCY2/jLaA9XIhjDHkOfz4sYR\nWK6drR2m3bJ/JfRAKhgNIlXckWGy7RxVL3ZFIRsOfdq7I1VOTgQOZ3a6kj2O\n8mj7/pPNqceDxNDS2pEVJGxfaJZB0C6YqKoi0xVWhG8LFf7r7BUun8bsa73h\n5tbV\r\n=PqZV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICSzJ+LDC1mALvz0ZW0DD0tZ97qpuOopPdMlw8vNaAgyAiEA7klc7uFTG1BT3F1ceOvuU1VbqquSVcUGBbDO78L8DdA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.1109a3d3.0_1614717290180_0.1499355851887303"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.b9cd8739.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-icon":"0.21.0-canary.b9cd8739.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-WqfFJ2V522otvRFUj3whJOUzV1tRtHrCKpPS0kqiTF5yam7L1olliusyoYenN5C4hKzQ7887QJ5Qra6V5awOrw==","shasum":"25ddb7cd9d663f02a816b59dad1252c5aba84695","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.b9cd8739.0.tgz","fileCount":16,"unpackedSize":74697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8vFCRA9TVsSAnZWagAAyIEP/2BxMFAR8t+PGUg90FHd\nZM93S4GQs2t/crVHRQ7AEsHR9AM7oRGOL/diqg5y+tNbewtgwQ5t8aK+TrCg\nONa8PQSui2v0RlzcXyDar0xvCe9qZi0LrdWCU/AeUACSQDaBCD41H2Z8fXEy\nlUXMULPgjKdPTdDSvxhW3Lf+6gXLyiaNeVEviEzIKRg/CM1x2y/S68yjVijl\nB7QgfAbWeQMFsIO4B55TuF5H0J2/2H1Q4hjh0qLI0gTmOEEqoUCbJLsZRuoY\nlEOaSPJcIeHRwSD/2G3dwJt7wZkdau3q/UNOXxaEsKtZejasZSKpC9dhdwom\nsY+qwuVLydg0gWwz9autZV7ANmxAGJy081VfWYZSzNWvL/jQL+iXfQJ6nxX8\nCl0Grf5hzMrYPLu2nCGmvkOXyZxyuLcLyBf3RW3gfNgYrevVZrwWwkLZrv42\nXLy3yifBEiNxZx5pOStTcmLpL1DezPMfrrZLnJ+LtrrfWTC26ZMHVX2g2ksg\nLXkQh9alhYj5WjLGb5fUcRT2o+XgV0YGHhQ+nGbBweudyQIRDFbfP2VG1rH9\nG9YM3uV7ZP2WfTTCtsrrWqhVN6v+bBrwQL0OCiiWDxMg30tkjyZX+5AltE1x\nicx862HPOZ132rnmIZ22EbEDShV0vsy1v9SN6WKqG+e3TkrKt2rfC5KjSbjg\nUYcd\r\n=yO5I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgb8NpACpCvQauAl+5IA+XWSdI3VKBk1GJyLczfBWS6AiEA0x9N17IRfdwgnQa7r990J4ZhYELHDnhwLXCkjJMcsHM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.b9cd8739.0_1614793669063_0.33801394910048765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.71ee796a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/fab":"=11.0.0-canary.0b4a4b2eb.0","@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-icon":"0.21.0-canary.71ee796a.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-+s1E8O/Xn7aPWyWmSsr5zrRyOfBLzKINJT++S+DsfowA9ips4fMRQVDp0YAdkOoG7Lunrq/PbCYKxZjW27LeOQ==","shasum":"2a478eabbbf5eef22477085cfb252eb5f3570396","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.71ee796a.0.tgz","fileCount":16,"unpackedSize":74697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1jCRA9TVsSAnZWagAACE8P/1WXnl7gH3fRVUb4NzAx\nTKO9LK6ngSxlxUmasPlmo8DzsyQAAEOiyyHdFX0TgV31c219ejBWcZuAzLqq\nfym3eHWIt7MoXTOEm36iQu7tCEH78LjHH0ifcCIE4CHVDcaqd+CeqZid2qUY\nUb1cyDPhy923RE/krZtDUNcJJNiLJW8TURi35TtPFSo2bRPNUzgKiRxVRhyp\nu4+H+Yh88pzU4OzlYNwXiwap7m4JVEYgNaC0Skf/K6hpmBttlOC5ZtCXLHOw\nCNIS2XFT0BaCSVs1MueJDHLNb4Xa7LEsWdLsQ4bxgWLLw8O7jQTkExxJ0nVA\n/lS4xotajKuaM0qwiejMJZwfQSrPKBh1h+UzrqUZYH7o5u6Pmq/1CqWbrNOg\nbMtNP+TWuxZh/P5vLiiLt/8HrpYcSXLArHUKt0Tl5oW146Bt3oJ0MCRLcc7e\nGBOXGVcyLKtPOxJM6n8Xu+PFkv222iGIXHHZWYHkNRICjszoLjBZLx0qQMdl\n4yZRSz+K6dTrpmOS6EOz+ml2qHLRBdsdXkAcuNkROKCcgGD2sdDAY5/MlOef\n5WLcju3olYm8faohT2wKvQlkPjjfBOqR0Pk/3KLYm17rkLABox2lIFhdDd+M\nR1rrcyLG3DSO4j13glsFqgh16+h8bIp7caoum81pFgsF+wZX78j1fpG9Wnhq\nzony\r\n=gle9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeqDw4V40PtcLIGRmrPr5/tqIE8GjiPgXC2f9LthZt4AIhAM0WBf2q0tIxrx5IYKfjtHFDa3IGciypx1N+MUnvEyC3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.71ee796a.0_1614802275107_0.7926685196173457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.2be191ed.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/fab":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-icon":"0.21.0-canary.2be191ed.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-+NySNGJ/LORcoP2m3yc4BNJZ85XLcpqS+pBKJcXAp7KigCXTM3nkGWo2OkjDJ9t5Zlye/f+3ShFTD/7JtUC3iw==","shasum":"8c46d22415e27d078f721af07df6fd50f482f932","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.2be191ed.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATzCRA9TVsSAnZWagAAJuMP/AkoER+DDURFoh8S0CH8\nGGbmMIkIMr6ciivCCj0kH5M7ozVbVPJl6h5mYO98/fbGbI99q/QCZm72lbCH\nvaYlQv73qc1sDgfuleCZQk54SChmu1zzEc5K5LbhVBmLLD49Ec8z8ffaewIQ\npWXWT8Kiih+dUzS+Yd9fUhYZy6J11ArI9uxWpnmnU8N0k2V8H5YF75qeEvhS\nQz60dpAVdopt8k0XLM2rBaIDd71goOBoANLLqt2Tf+k2AXVOKy4Cya1xyZ1y\nlGwXNcjGjXv6guGljweijwatTa8ixXwEcSzZHKLAkrILdvlW8+fI8q+UX8Eo\nAxzKiDGE/K10jf5fqoIFzhTp50UcUnaHTS5oUFxHJy79X5BGjFOVUIOc/1lC\nqu5qBB8fFhhpRr9O8SWS+LQrZsyOsuv8RsFi/24Lc5yl/noo3b1o7GOdM0IE\nJTLATM1a1OpH9aSM3CjPBpvtS+zztL1exDEMbsQqzb8EyAoOo2SV5LAvJAol\n1vcKMwsshLTq4igedoDTZcnZZYYcrGzEASmnClZWccIa0QPXjdL5Cg46ndKn\nGhKBKDmOerRHji9ekoykUI4gVdy4VKEg4mUPMVxknm9Hs6CJ81l8B0XEEOMg\nFyeCTMr1NDUZ1Q1Xuv5Q+vhMPCLtf4ylKWMT5j0yllgD589ehodJNsa2K70X\nuc4P\r\n=6fw3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdcnc4gQI9zODoPbAZpqqVco98cWo9I3Jw9vqq78dnyAiAT3FrQbMCNMgbxN7UqN8uGxX/iXTIZjO2Wi+QdHfdhxg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.2be191ed.0_1614808306744_0.44260651248291194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.6dc7b06f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/fab":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-icon":"0.21.0-canary.6dc7b06f.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8v2E3wOMPLj7gjNBgHY/1o66XfTfgaPFhhwQXOst0mZSCqgqGwjiqh/qclCqRfIqKnVckX8Ys6FhZ2Buz+X02A==","shasum":"3e4c23fe84958a705d67626c1f16c3684d735d1b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.6dc7b06f.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnDCRA9TVsSAnZWagAAeq0P/0aF7DD7wZUXl8UKUcwa\nKGKTs1yXQEp30ALMHT4ewej8T7Lkbr7U6TDzqZj5slMvARqQkSJ+DmfRugWL\nKQQ3GoAyHSCxBOeLgeIejoQEdesEALV+tD8Konazq/Vnadid+UfV+SB93d0I\nkMxZpwlMdoj7lck+XNb79PzOnvQ7Pu2UdEBqjk8T8a3cb8MV2tLds0Vv6XJv\n5+T820RWVQd7PwFnyDYPlAS5BJr0bvYzdEw7gZFTzaT804SLWm2rwONtJYSc\nz4GYX4oJTX7aF3bGVsY/r14RhJJvQ70hwuKuN5cDJs6CwHbO4fpsw+taD9vT\nnhlhptPTOjP4xOE13PBzRa+EN8vrIs+sNoh+Kx5YAAWEhXK6rvppFxQU8J1C\njgHqbCk7nnv0rKt5x0K4OXXfcu2h2W1SURRt7wl8x7yG+2n5LWQ9Bw7L+fAF\n5+MGpVR+xRXjjqtaSEbjOUAJT3a/um2oBCiajpZrkUc81UiohqZvFAYbaDP3\nLin4w39acVQft/B0fYa4JhaFuiIwVybtuS5Fpfx9STQSHaoFNXVoFh5hHYOy\n1dLn6l8F8ms8/CGcXgjRl4X1KgTZt06yGczckXNrFtEkQBKTroxSiq23OB7/\nsriZh4V7RoKI8XrcoCzoQPbmwSEkbH68sEQ5Nx83uj48s97wa8xZzFUgADYC\np21g\r\n=iSjk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCcEmCYKT6RjybYfW79MyEhmU42Zahg+08o2lJCVkIegIgf50XfDN6rjAC/wfR519KG8NiHKMwWhW1RwgfB0BdTeY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.6dc7b06f.0_1614903747320_0.5924401953139742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.24fe7ba6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/fab":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-icon":"0.21.0-canary.24fe7ba6.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xvHiEP5sw6SXSrym8C3yYXWMq+hnbDO/eiunMLeM9IoyFC9mGXRpdXb/Dr0KbG3NYh0zM8FRvw1LSG+GMa5PVQ==","shasum":"56a5f54fdd8c94b42659bd75bdcd8b095cd4e438","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.24fe7ba6.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmnyCRA9TVsSAnZWagAA8rQP/j3nuekHyJ4tTzLKZYbj\nq6ragLUfiqjVqjFLuZWVL+AiANdZN4lm1C0/0q9F0hS4/2Du8B6qh7pX7DZS\nqMY7PHaBfHvYHtlaZTIXBxMM/mO4JBMtaIJvBl0n2knaA++9FN+x2wvFKSJ/\nehCh2lS/kqFZLGBAdmgekKcDMoVZXM5boJHOVowVPh6Ed6HUYVRaaAtYld+E\nrbeYtdqcUu33uL2J8caI6geITtp8Jm5JOdZJuZr9pa3boLWoERX3fgXWsz9O\nkkuCqwAz5TlPgwyFs1Z8AIll07JhBvqnQ1FNZWRlfq92qrWErim7EHroU+oi\nhx+4zN2WisA64BbSO5HF9kZrHDuNqCTeow042qcVnCaj+a/09BB2ub8gat3z\nBAGy+wufMogEEisLdDK6Vl+W2f2F3J6kQVy7GL73uuVvb59zyKYReal98FKy\npBLhoWk8X5xeWWfJ2gOqjEmWY168/CCjX9pk2CAJF1QeqCBhvR+ssRL/+Yct\nWRCZ5iK9hrmbkDLC2YZ4QwaYadF7zQkqANnCRVINw45zyFI90pSBnt6QM2Wg\nJwpL5bOkCQjDXguwiZ9CqexJy7syWyrvTbnBdU/gXBeXfKQIXZOrQymQVYRg\nEXlglyqJKMoFEr7U7LW/Zr62o4DAJE6Wtk0VUVcJVDRAzkm7C9cPjaymNrrb\nw9hx\r\n=Cfsp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvRS9fbLV/vrEgfvHqGhunUTOu+jb7K4PS4BnXB1DDRAIhALEO+asaxBUqKmUU1WSZwaF14QE82yU+ErR+NLdycEUf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.24fe7ba6.0_1614965234442_0.7282974258745394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.12c477d1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/fab":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-icon":"0.21.0-canary.12c477d1.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wnsLZjNghY3O63GWGlDBHPbo1xic7bWmx2PtMYJ30UHy4VuwJAmo1bykf7faUwJ5sAur1SwNp1zfCB7FJJYxeg==","shasum":"aec3be5b256202df045a4c6d8895f902f3713c0d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.12c477d1.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPpCRA9TVsSAnZWagAAG8wP/2f8o7Ep2VyjRYRtjL9/\n5Hat4PV7c8CyjUehID2NJIloXwwUyS45S+8pDTQIrJRXNJfql7L8h1CKh4Zz\nLxg5bcfaW1S8Gmqyi65ckexORrhnaAYOHbhM5uWPUJYFK8yOb9t2wUAiA14X\nHUWCLUL7CH7JWMKwtyny8BsZLwr17DJihwDMP95/N0Y1/E4uzwuCyvJrUYNb\n9BG1JYHuuH9WVFdi9Lm8QKSUeheNLR1+nZhVxzezcVBCemy5mqdec68E3YFR\nWhorWlU7TMHVcJaAfEdQqcSnx1Et75fdxrQWFireaYL7raywHhDBmcbbeYLk\nLjlcRP8CWLxi8JqUh7cDM9FsVxwsPSXFQClHVC7v/9en4LV77tUeaxIdMxxH\nXKrZn5txGXyfaH9HEgVoB8ZfL5TOFbtbUX0TBQTN6zzslWx6PUr+efOqUZbz\n7ZuFrcLDlVbOezGCPoq+KulaoyIJ7TV3zWmZnAzd2K+tWKcLXcbRXTgQoTRx\nr1+O0KryO4i4BthXuFR9Y/TL8diXTGInxQgCrYu9+ZlynFhpdqtk3zTkjZV1\nnqq1Es0ZeB9V4peyQ7K1aAFvk+F76uH2vFx2FNDmfRKkWlNWD0kALG2PUac1\nXWXHyQkZBLpF5BgYniSQ9+tEQkt+oCbsZXAahMt9/XxHVb59U1f7BmdT/5at\nD2Fi\r\n=UxF5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGwT2MDklKt6SQ11AJ5MFzAZo0eWKlUngJtqw+4/LuZQAiBNCmyKLZEv0RY16EktWAxeH0LbJesE8/eZHm8o7h4kow=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.12c477d1.0_1615242217386_0.581953706443328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.4c38f801.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/fab":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-icon":"0.21.0-canary.4c38f801.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YS2GldsZoYDgrTCnGtu5vKZBt20gbxLar1OyB36EXKJa9cwwyiCszXcl+8Q8N8CrwfP7q7I74JvLtg5qTmLoTw==","shasum":"0c7fe2ab4e0cfc635753914a941bdddf61ac3f72","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.4c38f801.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrI9CRA9TVsSAnZWagAAygsP/Rkj6iy79IA6wEeitR2g\nKcM5HV4LvSeCF3B7QzqoEs704geGDD6Dk5SxIlBUHhBrz5BoymaKRdgK1Rno\n8pKrorejxGP1y31IjfJ5itgSJCQ9XSrkWetf9gN6w8cCnfw8z7fUVubvE7fe\ngmAOzB+UTNvuzujzJcJDZ9Gg2WLRugbysBRvYYXq8yOXj5vNRppK8lB0crzr\ncvx8ntnLJoW3EpYxEVtw9Eb+rel7gsC8r8MKGR28Q+LPi+HU3UoDkemVktn4\nTevUBJZRblvv69JEdlNIZ0/OYCFBAXyQMfQoBqKukO6XzbZVyrF79eSiSx5i\n+UDOaCuJGNMHg0b3BhowXzLz01mWkseOZe5pgrIt29K4VzLiUTgLwC+Raawt\n/kHJjsWoaGkgK8jnda6Jtd3kOfM4tUAzLG0CiGdi9VAH8bewqCW/xGLLLCNc\nztx+Cg6IT913swNQs7CYGGquRCoD4GzWpwCzzrOPJrEaLjEvxR/Y+7jqGz5D\nstdNbTmBk6Is8SRqyABEfYglN5rHxmVD19SK7wFGD5aBX0md9dYK935vi0Ak\nfSZ2rAHH/vGqXKjvwbj8uUfSSjWWkHu9Sm6sEjMnXcXCULgeWrJxRmtDhXXP\nYl2/RYTQCxi1ftZpVHp3uacRLvs6Z6H2P+pLdg/9zR0o0lgOgmNSkovcHp/C\n+BvL\r\n=irhl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEtkHjYdXLTodaoGwg+bx1JbD0113pWa/zYqqKgxNTpAiEAkq3c+GNXyWOHJaqCgLEJLo8XO2nT2TMc5nzuqkMGPVI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.4c38f801.0_1615245885506_0.39251491374836456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.8795b83f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/fab":"=11.0.0-canary.c7d98fcde.0","@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-icon":"0.21.0-canary.8795b83f.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DR7+B4t+UWUKKMVu+OoBcb5B7SflnulKqnGdpzZrwqcZRLv1DWN6rmc4WoZRYgUmEAuZ9qy647p4XYg5S/DSZA==","shasum":"e89ec235a1186d6b831974d9603d7b5ad34b7236","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.8795b83f.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74ZCRA9TVsSAnZWagAAMUQP/A/IFeMBoOh2nhXnPQ9E\nF5+k4qC/BytC8HXMl749dydImzOUFEI9IhCBnpoyOsSbv4Q57m8I0meuC734\nayNeb1aXe5VXnjXqag4Lv8bt7afJxBrP7IM5aoUpn5ffMXlPP8F0vda3cazP\n3wP2oleUWp4l4TYnPuW/1OfVQkBZIRrpa0X0BFMyauBiBtaWtmmBXt/BXpwx\n6bDBydSATZ1/6ipKcv4iMAboHLGsRhTj90NrUpCEqFdnu1SRIYxFyYTHLaA6\nZin0Q1+stV9HwKolZqDhOLwsxdJ9cKJ7Hy2JTXGsmcAIUrU1wI4b7UX/6CVn\nfI1ok3qjQlw8Nn6UuJzol6PVb3BQSzkQ/YYYonmqRinz4ge5VYwrIfu18A5G\nVdsilzlT4n6nNdQYSKO7O6Lik7ZmTFMqSW5Vnbfi6VmF3jPv6nB/INa32Bqu\nCO1PKTTjyd9qn1kiuoGHnZFt69Wj4G9pp8dSUvWW6iVtv1NIUHhvm5WmaqvC\nC/vfNxuTDVITSsglU+/NYalK9s85DeiVWzNqi0Ygn48DWUEvR9A8UX9EaTMP\n9yyNydQW82/WkEvfN813NLZ7QdjB9ausPXb1VAIWlsudyRzTD6TvMTzkq8t1\n3IXn8lwF3fY7lhcNTKhf/cUUv71MmNxXcyXX0Jcfgd1VjDEqYAMHoYIZVu9S\npXH4\r\n=j+50\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzqIU49iI/rKtVSUapTE+4pDiq+/KCRIbdGeMbYuI54gIgKZ/ErWHhHM99fuj3sWGaj1bNGipx0lqWxg5wApFWqpA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.8795b83f.0_1615314457563_0.4010925778015284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.12b84cb7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.7522dcaca.0","@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/fab":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-icon":"0.21.0-canary.12b84cb7.0","@material/ripple":"=11.0.0-canary.7522dcaca.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pZhnG6tg6tRvXxSOTKiIp0vBmv8Gk+mcbs0/P2ni/650DwOXWbY6IEJB0u4K5/4UjGDxDOmKQx9wj+JvVzkA6Q==","shasum":"4f107d6be6d6bc42fca2c21fd35775bb0fdea96d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.12b84cb7.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWwCRA9TVsSAnZWagAADHEP/0G25DmoiVmuDCTzG+2Q\nVSr4PmrS6/nbaIbnHPjP1pOezsE/YKU5UnwZPVdIVqz99vJhmEFhExlYMQY2\nX9sTEIWI2HoapKxs7B7TerS3BHuDtVP46+bQfTd7a2zvKQvzrPpGNCPnWT8t\nzWoo9P+PhQtku+mq+w6thS8rgdhVvcQlkaL2e1yvFdHOVIVtm8O0YcpN2sGw\n3N3FVR7AKm52f+pRuXJgRczoIf+OQgJWXWvHXrIJYebTE2gUydIAPTowwWqZ\nT1MFkBDk2JX35mNPbnW4DDHnTWu7VetzkuD0hyc00qHmfTcjx8NIKUF0m38y\nwGfQqHCFM1eoLB0u1a9ry1HbXFSHZao8/T8apgofe/gZ1SFLtirw6v2F0bTu\nd3o/I117LmKgaWoFoVD9bnlNzDWmXnU+hSkxAFjNsCVYrLluUWdriRRBkWjz\nKaCyU9YSPK6AlKfoWlX02SkYqVWM9Dv12CYFmuD5A3O83hkVKe7w1Rf94kPE\nope2SjD42tZki96HJXPpSmDvUoSPAJzQNw4IoP708PVw868CePMUwvsOqPwP\n2WXBR49moTud90IMHAuSst8kS4vpRxrFM8LJuIN9hPe7KKfpKYLRHZHsiiUX\nmnN7k0sJm5vgIu/HtGQg/y/9XWcfN3CEozZre3sBQsaM3GHToJPdM/vh4twa\ndbxr\r\n=1q/E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5sQkR+lHCxDc5xF6J6X8b1Ifq7UkH/tQtB2ngz8fEaAiEA7PwZ2sQVjMOMwCRz4uEzR5INVZGxFnHJpqiER3C4sqw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.12b84cb7.0_1615336880018_0.7160766255502757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.6ac6784b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.7522dcaca.0","@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/fab":"=11.0.0-canary.7522dcaca.0","@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-icon":"0.21.0-canary.6ac6784b.0","@material/ripple":"=11.0.0-canary.7522dcaca.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JEH90Xb9Emo+hYk0fuIoHtSaqd/kocbFOGAW8hjEgemzb5MErmdQHL9W+DYsx4cyjcsyfFB6uCnCmrI+SxbuMQ==","shasum":"b1f2caba2bfb956bf693e3d16aa75af2248829eb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.6ac6784b.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBgQCRA9TVsSAnZWagAA7C4P/ilo9cc4Nfd9UJtHiqMY\nlnpsYHPt9uru5psGANVFLF+LD4Iu5o0Rq7kU8nHmJ6B45RxzyBdLSDxb8Flh\n66XMsTjZtlu9RIVG7TyyrS2bC/2pbKCO11PmyG4JHZWM5c6A+aGsZ0Wte98c\nHbG1pcZz5WTUWtn+/i5iqXyHmt4Uvq4TrH7GOBWbn2alv3xsrJ7Ca7kGD/02\nQbJ84queJWurrkUwjW6L/YIMAxslVPj3j9QhiwrI6DWRp8t+2KflsNVadzh8\niUnRxmh/63/00vaTQ7XygjVsr4vDNnP7DOr1FlpCfuCNkScABIIALX4oqNqW\nnoEUOZswo9DV1ofeD2E03PwezHsG1BU6bJRVKiHa+GWvU15avidAuIxT9W/h\n20/C8AD1S4peViVRgDcz3MMD1Xmewrf6ZcFEibwK3MdagWxomHwjhNDAwHo2\nXebHbg+cfNIUJ1PhhLybOrEPFJV+Gn2oKYEtQfPA1odLTpcGj+H9mv0HD/KA\njX5PLuUh66iTroPln8VKJE6BKPruoOXRFhGYe/wKJD2jR5DBgKGrq/3xMlGA\nKHCRlcYfHAdOxRcrrrquQG1VNkuGDTKHIEjRUsd3apBb/m4kvegVgnwCpDE9\njlHojaV8mc0i/lXCsc9Z+qlrzp/sx5NaqL4jjYrj8Rag9pOx4etE74kHn7Tr\nVQxW\r\n=i5lY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr1YJX3Qbld5wHEMwZ0LPT1LGWGruPtETScoLji60N5gIhAN8JvGWSLI0qpMyuzmGM3yvXzRJE7Wk1rP3c8uXoLk/6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.6ac6784b.0_1615337487765_0.6201120203285149"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.b6d92934.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/fab":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-icon":"0.21.0-canary.b6d92934.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lHEPHEpo3ljtvsgR2ifKx/pUc6zlsb4Na9PSFR5IqgHDdZOx1IZ2U4VgAWpOjo2dyWvwc56HHyCX6wr1fDe19Q==","shasum":"92608208b1b3eea7c7f5c26cb31a05c3c9bb2170","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.b6d92934.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGgCRA9TVsSAnZWagAAAOgP/0HDsqwxWxSNwS7rdjyd\nUR9Ig7M7+3QU4y5ct08SJyy7Ho5kljV9UZlFPdwof+gEW70TUUS3NwQEXhcK\nlpNp/HZahLk0K5sMkg+OcPEQoz4kyV/nfbCh/kDKsSJgCytAaaDbqzV0kZ4x\nQy9+iEEcIM/7dqPO2k58MtFSnhWj/nJPwmSu1ZL9rsUTmoplkPelwj1dLNOK\nBXmLkNv7paou/IFc8RIs6eSTpby/cBqgohkm00bNU+KISF9xb4u45F6GyVLe\nuGppJKA9w4+lwa15EtEndSKnDWYGSgffcLJCLAHvQl8fqXac/N44Y5yRnvHI\ntwjn7RZdzKTiQfMEkZkd76mYt6hem3wvAH7PoNGKbHANBf5hXBj85jCtaaDt\nrcsE5QE2as6BCBKPgJ50ArDpiujMcWAiOOSV2MOlqZsh4k24P5d2QF9ImWhb\nSj1/1qlGX7NSFbotYVDXm6Sm5YAJ9J7StxNz9EFlvvfFkI5RqeC03Pr8zYK4\nXbeQFO0AhS8JjWPbvLw9z45MuutIQ9paX+sojW8Dec44gfg8CCWpX0WDZp3i\nRn4P0Ck/E1YCa7quxa8jQANwdqkUVPcmW6TddszArbNaN0yY0kKgfpkLARaq\nymrQWbW6Z9L22+AwKpgTf8SSuO/L33kX1SJnk4bzZfCdwesq50OrLtJC/esO\n1sZP\r\n=IveH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJ5igtVv4K33H9ISw+Scb4k0FHmyh9Q5mC9Z3IzzSt3QIgfr5bEGzPl1c+ovfuYvkNWnsLFlPXURy5ma8qEf0Mc1w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.b6d92934.0_1615413663602_0.6536545549190802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.99a55b9e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/fab":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-icon":"0.21.0-canary.99a55b9e.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LOxjNIfNYLJlFBsKKmDYVMqtObTxW3PzmbAvv66mC1Ay0LUpwrTE+0Y80SW2ifLTP9TWOPQys5M5mF8h4pd7xA==","shasum":"30901b849e844a0d0dc591a19914f05b858f160c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.99a55b9e.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2JCRA9TVsSAnZWagAAickP/2x2MQN5aXXaHoaT1+0Y\neCcZhfjp+VW25pbfxIBhw7I2QkoIIeSBu+9AjDhkvqAt/DJIwvbqC88DIZkd\nLAjtzjG6C1zHAv0RApehDxZpx3LUqXdwU0yg9FoaKaLnIe9wdi/+aLrblIQH\nkltf4qZUqhjmPIXMW97/oeFAUNlsjd6VasmLwQCych0AQGaxV7GQic7t2cTM\nq6edQM2gfQMr8+KFAISdXIixR4JknMZtDMzKXTGDE2wqwhIGTZUG030FISBJ\nS4xvi/AaUUgGTkMH33u4LFWuSN4yfw9LaB6dj5foaSHYYkz3HBMh+Q5S8gNT\nfImeIPk+AQT2ifWvK1Z50r+AIhemr3OzpcTWfqdV68EyiIJ3UaMTkTexytQ6\nw9zRS0YgBxg2v54vOPnoUp/dt6yyLvBSmU7mdVfwqahPMlhEY/2ABRgAvfZ7\n4fUuF4WMGSgubPDGu9PhTjrAz/kUOWyzf3hH1iFj6P170zJsOKk1Y34pa1mQ\nefazvSng1uH5v9Hak+zgilKYaixxkP7nR58jQ7ILQKownfCX42szm1fMaqYp\nBdWMp4JpErfbrlZfEy+uk85uQf+PzuPUtTdrKysXSPwMvz/Pq1auqi6guAdi\nKWndPqshprtsjua+wfrIT0GGTCQ0D/fEpgEP57xZxp5vpI1XPYYf+G72MXX0\ng/DA\r\n=lUVf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQColZumtv48OIE8TnEZd1opJbVBjak7xr9ChJ4pxqUQXgIhAKuFlkiNe4hNMbxVwm6ATnmztA5SConfxhbmRWcm0Iud"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.99a55b9e.0_1615416712625_0.4426866169864787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.bb14efb7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/fab":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-icon":"0.21.0-canary.bb14efb7.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9UwCImapps80bsSx1yVRVg+/5B9dSaQkq0IV/YA1oSiB8i5eFJdyfh6UhfFNCA0hsFHa0WopA7WCKsOxLv+d7w==","shasum":"ef567dac19a334fafa10a95387176f3f114f6463","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.bb14efb7.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgyCRA9TVsSAnZWagAAyHsP/13MJwod4OyMhEbHAbBq\nGYo5cbpf41omdSyCkKq5PKr61VX+34fL6SqNoAjIR81f6bEBW6CFnwG8xQVT\niedbsaeNoSsHelv8LKU+H3NAi5GSfxNd7UuRDZ4PPLGp91Zjnwpf77s7nYKR\nuKLcNRYpC3FQzJ2j0hekSSJsV0CEclxGPqzKJjjXWeBMnb3LHXE1T166Af8t\n3wJd41CVQLFFWaPcF37jQs0mUmEROxtc4FckpPuPoJenqhtF44z+vyeFxdXl\nKvnS3dQT/F/mnV8cXNhemks/AnAxF9+P0ZBlW6oSVila0udqqbU+loYFCozU\nb0khTq8Fj42lg8XSnHjR7KuLDOeHiMmUKZ94qN4pqGHbvNtFRwZEjoX1/hrM\n/Q/U3+emLUA8OYk82GMLxaeR3sXuOkvaALtYBhzSkA1MxzqTUY3PcbGLfwLe\nwcQ2Kf8/nkrlfIp5DI6i2Afq5l4ciY3k0sm+4LuPEMEHXLX55LG8Kr7qAOAJ\np0Gbd9Z2vba6DxKdNhT6VZ+rLjdm1J8v8QRlIKbr/7m0Toch+xJaWtxaO2te\nH6kTQxAV1QAtetaVprYBhPJddeLu40q55pXzgbdjvLQ7WekF0WwcB3gMp1to\nD2wgOu6i7d1UaOfyCBlEzqcypAsMqIj7NtG1yqPiYMhi2JL4d1jWo9fb+bb0\nuqCg\r\n=PX34\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ6mIAJX971TBeibxtDLyetIf7PUhs7ybGqfjPCrz8rAIhALPmm9lkYQBD2ZaDa274ajl/O76i/ANFZp10ivQDcouM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.bb14efb7.0_1615419442270_0.3110151758255808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.9ecf3bdd.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/fab":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-icon":"0.21.0-canary.9ecf3bdd.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MgMj6ILseHoa+Ay7YLTZOnV1hU0MT8Lirg3Zd7Z8CJjQF7sKoozRe1zHm4jZsUAGqYC1HM75Y5TfBfhKJY2+AQ==","shasum":"63d1f3b7199da0b9df4bbbcb16b1076e0f91f26b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWMLCRA9TVsSAnZWagAA4RUP/R8s5Ao/oJ+FotEC+HQt\nJpilCd1X55MOSuPNYaS1h/6ig+qKFkpphJgRbBDWpxhwHff4UETpoEDe1S3U\nO6yuMMg2qn9iSg8K9uYCTFC25vKUH2Uxj1WscAiV4bsH77IaODCvxCUGlmL+\nG00FglM0EZ1BJuG5gxI/Z2Zgl0TgfNJ7uwCcwdcRyOsO27u04uFfWlpyljIZ\nbt23BMKUkHZEpenbrkeF8UKV6QzjEABPNtb6DJkadABhC7W+qdZA+50DDfeo\noK/gvK1aYYsvHB54ggn3v6QOEF5LcTIBmJsz3RjXCI6Crps4EuQfwl5ANrj+\nxB84+1+B8nDWI9wVheMMoo1aOylj7UcT7EZanXiDc6AF41uXoIx4IBwBStNA\n5PR9W3GDW1PsjOcdMc58y0YNeus1ch8VprrsR8YXrqlnHqgZ6LneZQ0Vgov5\n1iroJVge7b5OzktPTe3Dicar2FVV1lLy6I66YVRspjPeVZcQnmelR4XgKLbX\nTWTWBMsby5c0M49fZf2WwcNr0RtHqAdNl/rL+2VOSNesosC2wmxC9Rt3DXYM\nuePGq1Bt9gMd+LLNMv3lS74VBSi6SA4z0JV3EkSPaWaX0fw9w1fo3vJiiM7Y\nZRLzHUiPuuZ50SX0zeebCquFUAzehUdFGvj7IZOclWfdQVxoYUmgZwQZcCQK\nbuVh\r\n=LKrR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs58mLophLdes5W+8lWQPdwfAVWW6cFP/JEhVwgxwjzAIgDgnZv50dZuTHnb9dZ+wW54ZqfnRw182ojDc75FJbIt0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.9ecf3bdd.0_1615422218995_0.4650483235904723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.7c0e02fd.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/fab":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-icon":"0.21.0-canary.7c0e02fd.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4wUjrSZyPInJD4tRGbI/EXAcYOZAsJOSDNXNn5HG/myKGQ+wt3hG/8mTLK75XAD6ePfF53pLM3tFZ0sqoj4FZg==","shasum":"e35e8119bd8785e41477736450fdd36cdd532652","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.7c0e02fd.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXaGCRA9TVsSAnZWagAAgnwP/RyrKnXbnn5mfWA0SqLt\nq3sNis6w+q3KNdS1aZGgA09xA4n56MmWGvvmabV0T8pkzGVoGnw8IbntyGfK\nSldWuhzBSQA8qSDMD1YB+Pi8ylHJOTm18kB59PoS8tWgS6TiFoDK9VK47tiG\n9jwnnkeqiUPOeBf8KLrbGwcUL814treXQK2/OWe6q0mSv1O68BAMJ+KKBkeZ\nxTJlJcZATrR5UH4QBhgPoDPf1zV+Kn5F91e+rKP7oNzjqdA58batHuK0rBmD\nler5XDe6oZMSRNWr5EM3ShN36MnoY+ARpIeEwPDg1fc90t6nkK/Ll/8e7RVc\nC8P1Q56/AUuw2XTQ1TWDbh+A0XZ4bDHERVa7y9xRbLoqADoBOvN6vJD9kT8N\no1ZsOLPWHlRVQfu79RPHfS8gjru5XOdNcsR6Zz87g/2td7eoT9icZoSa2oMU\n6l6Jq4KnXc9hLKhjJ2/sGVPn4zDCqbL0qaoRZChH3ngY7ggguDqTKtdhIBIW\nZ5xdSii23b7L69KtNYZsjdUkoX+LHJIdeYfOVLc/ZZfczerE6wdHVAVyocPz\nwXuggcAPObEKNN4yRZ15DeV92JHL0m32B+mayIoWpJ5PNHqiHzj8b43PzcPP\ncGKOUBSnhbhKZCyHF3W3GT9Pc9dGte/moKP7X3Fk9HjbQ8CTp4qXQXHSE+Cs\nQreX\r\n=874/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCe+/TpsTzVdvmud/CcpyRVa8ocTsAliIdJG3YnQdZFbwIhAJ3Dh2YVS9mdB15FllRohMNWKV/FdqRxdAl7Z7KkFFbn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.7c0e02fd.0_1615427206243_0.6763231962312932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.2d6d59cc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/fab":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-icon":"0.21.0-canary.2d6d59cc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6bIwxmnYbzel1C69Ln60ltFoxFi/Ob2HVZDvHX5mSogbX1t9JdYSKvxcf3PzGbL5U/Gbs8bRiNQDZXYTWxCdaQ==","shasum":"f520e96be5f1d97802b268bf215df869e946bf8c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.2d6d59cc.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGKCRA9TVsSAnZWagAAm6IP/0jt93za6++TFzwcTfuQ\n1dCrCPJ10PzlSMQl81qOm7dzTP+GrrFjs9f2TuKNw7Cdob+evI9TUbEC5dHY\noFElCaj8DkKhsgnigyNZr3KIOsnTv6K7Hx7U3KqsgI0KF2eCK0/qNJcBJwE4\nS+PBgtf3G8eVMuqy02sTnnKjdJugNgtbmxslwtt54Ot5dlbG5v8zmJryBZBl\n4Db9uRE74zO9QQix/C3GcW1vw4LoKtAoPA6ULkOsR23Dpql9wUDhcH2iZMau\nZSooK5L7VbbIcVygOLSfSiuORurgq4Xzhv2F9Y4rFFB6Sso2htPmGF0wN53D\ngSiynQDejh4doPSWYf1uUIOaq5EoGwL2mZNvwe2LP35zVbsqhp96tC7q8TLf\nUegTfyHHPFpk2SXXykuyjmsob4RSlOSIq4kj+f8KTW9uZ0Uqj64KUoQlZZDq\nL/keTaMdfRXo5LGQm4VuJcTIgJ+txqwRdv+zZdW6WjoaF0AHtywfPPpNA5J6\nhJQf99C6bVmX9Zb4A1VHExWcisrtoLub+PG3pKl3tg5uwnoaX/ygnBg94u3t\nVW9f4covijjFk6gbZ2qH9Um2ZhO8mUNDOxnzYWuKQsLCQCnND/WYX0brSJde\n41OgoSr4pGE614DuCb6l7L+tuvxNL2d//utSDfg7unwDSaf80IG9mjvsvDLX\ns+Db\r\n=R9Mc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLG89Tgh1jhg5+rdCeMJX8Mzr0acH9TqeRzrRXnO0mzQIhAL32zKZgwDpdK4ezcdat5ws+db1WiU8aU4nU77sbSEgq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.2d6d59cc.0_1615487370308_0.1427405442808911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.0138863c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/fab":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-icon":"0.21.0-canary.0138863c.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-KqgyZctwCJofVEQ5PVEkTB4ikdBPs4WzOxxvqvVz9f2kPSSd1mQcPbBzBtyXxjlenFhTLRK1kspT41kEjZsOYA==","shasum":"f3399e8d0bfae8b7fbf5caaa168a2ec6bd248d81","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.0138863c.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNKCRA9TVsSAnZWagAA6fEP/0jocDY4wr/fH/o/kwua\nCLznXujw68DNClsfz9cxKLV1xGbvFjmxrnJqGjstqeqKnYXAGvflvNDCoQMO\nkVjgC2AWUDy4k8K0QVx2ig/nEeOr6qOYjZhJ05EPREAcFEyFbd2PSBtfYxa0\n1wVtw3DdwArLoS/knctkxS1xulsR2M6KW4vFQU5OuC9W3XI1bvnCQY6ajY9H\nsAHlemZiXdGsvRgrwOQDRxR1j44NyHgy3QUJ0AV5c3XayWAHVceSaNxqZ3Hz\neLJFuXfrXSMUqs6f8heCwFkBA2Iz4YtW1M36vyv7a9IRQQdpCt7mQ5XmBAVX\nRjOFuXE4Te9s6fkzbvhGwxXWRJ6gJgNS2moVIiteeBUR56PAx/z0ON+ik3zL\ng92VweKmjUPbouOFsM428mo+tCsqlQEvXqTfSggbv4Y1nuLyM3IbiAO7bVIQ\nhRjEBwMzem6QmHOmtFGtTI7FqvDZPfj60BfKdMJCLZJ2f8yPRKGwzQ/K8wD4\nxHlOpJoOs4DhJ87kp7ebCxp++gZQ6WgT+0CM869cVOieccNUzyZB0hLUk/cm\nJALqbO7rJJHdrEuPvHMs3craOS/osRSTs+KT2GpS0SKZ1uIYb2HKTk4f3nx3\nCNNgFy9HmIUfFP0rGXkt0ffTrSAbawUOsZMH/4T1pU4Zk89Kn6CNMv00gs38\n2StT\r\n=K1an\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKNiG5Yvura/l37X9UIPdJbJqqODlbtGL/ZuAAsQQTGAiEA4tCYUNbtDMfb6wS8zAVHGZIt1cnhrh31DdziNfL1Ldg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.0138863c.0_1615487817937_0.7648576581308455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.926f5bad.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/fab":"=11.0.0-canary.59010b6dc.0","@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-icon":"0.21.0-canary.926f5bad.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Fgc33/+vBslOLy/Ur0zZ9I83XRtFiqi4VyqWk6Mo+wBK34Hbfd4RMIDGvJ9n5nFMOhuY1qauGrO6ca5MJ1B3PQ==","shasum":"7e751fa5e307aee88b19f54735b2bf30d9c964e2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.926f5bad.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnstCRA9TVsSAnZWagAA4iwP+wef0+KvfgMSPLDgNQ5w\npefqC4SdTOOOLIHx9VqYiO4sCEkq2wqfwB6PaDchiN9bBHSb8FnDTPBhEyh1\n/zm3Vk53ienwLTuI2MOTWhEi5lNCnYyk0LioSZbh0oxtQQCmfDWABgxc61Wx\nl11iNe5y6juWVqaS2UnaCynqnmxty/eKdxl+SCh2KgLdLBxWoHytBjRit/Yc\nXrknIQqAlf1nxEKIbc+YPhhH8Lp2ikhjbN3CVXkQWJRBcj1i4LUjnKq99wjl\nUn8ANW5f9yDeBmxzoYsqb/+aP3W/tdnQnYyMVR4UyJlo2ehw2h9fMyJdBp+Y\nT2OE38cL/Ab2CSkHA6Hz1cIo4HlpQ3wPRHUsMHxAu9QdvAwmLsNuCiyaDf9j\nq+YoT/bvVvetcTHqSGzFCLfivv1Ts6NBJ+jbFMYEDCgEpe80DN47xjHQas4R\nQoLRAEQ+L/xA+UkCwu0S6whMsRRnl2+29TLIXlRpsm3nXVQToBzoQxpnxhfe\nVk2obkaYwbvZ6EyU7SFAWrQrssGP2kqjEbbt8NRl3YNVrb/EW7MhrCx+7x9Q\nzIye6rFJNrPfiOjMhmBBLvbawCRIYB9DF5C+9wiWJhitI3Dwj+rDIg8MO8fZ\nZ5usLHmiXmEkMpP6aDdXzHDFtR6sE9OzbNMGYlQRGniIDi40GBl/4RGR+dZj\noHNp\r\n=sbAb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8e4LpdebqJw4XWE7B9pjzvImmwBJO9wqYcA8F99w7aAiEAkyhaAQ5BHlLUpvlzE4micz6lOP93AFjKwa4dhQbqtuI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.926f5bad.0_1615493932942_0.9272460207308357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.520290a9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/fab":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-icon":"0.21.0-canary.520290a9.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-w2EF4utgIoRZuP6xe9cRyX+kT2kYSASGJ0vdddiKRZ10uY9Do0sPhqbzFqrsGZsWVtWlKm4PUSbj1G6r08gKBA==","shasum":"95ca5224e4004e4b70514445f4ea280a2eea9b74","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.520290a9.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpl0CRA9TVsSAnZWagAAROMP/AgN9sfrYlFY5ALBolTF\nFTlC47WHukeV3DyK9BJqwvZgqqaj8qoy+qar30c/BkePzXja3M0BLvXtICdX\nDrsI66c/5yGbkA1b/PRMn8Ktc8zsh0fvLXw4QBH8gKnzZc25un1jAcl2KHN7\noDXUsxbE9uz3TMtqPL9/IsaisevoZHdvypp1pOT6n6/vnxXPnRWhBShyZsgJ\n0M3Rz0juPn85KV8fHk/xqUuWZmr8zAJKWW2wIOP0Y9fu1UFE4s7sZgeWCmAO\nrMI/wVVedNSQeOiVo+/00kKz6ajx1yfgJ8mEzyblenXAeyLhxMh2s6A4bqHY\nFcTGAufcC01lhJOj+V2UXUfRBNKTgBeSQdFmwXvdUMWwxwsJTXAeobVXZJ68\nUBAb8Qs3ZBehd+2PfYlH+SArAiWitsoWG28pb8+87nCrIHSriw1vK/yOtK8i\nqJc1QLzPI5Ic1qJqM7iRY2YUAjy9zRCV43rw3OQTq73Ni9l0q5brJthLdKia\nsPIbbJNc14CxHbW39/ppPezUoOk9PHz0jcVXo2N1b431jENuG4RF5EKqo8eF\nNe5fkJmd13mjc4a8o+yjNcEmeRGvxb0jaBRLtl+t/updFl0CWCRbajsD5zG8\nn+2JokXCR1mZmDbfFvqtTwAkcy0TXNaal4NO06REnKG1wYAkzL8eLw9AXOPF\nErXu\r\n=wBxD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPoLFGgGbgztz0WcAj20lMiTtF+Ktc81026jpP1+kgfAiB60iNDj++fVsqs0/gEtfMCtH8IX/xo0YJN9zQqHdCRpA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.520290a9.0_1615501684503_0.22334279301585092"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.9ec431d1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/fab":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-icon":"0.21.0-canary.9ec431d1.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RLSm6s00MQTKqcXEptA8A+wOCqXmW7kNytD9DkSdI1Ofiyg0M42KxoTiaQi77Zr6qvf9myHKvPPPeU/LsH1HRQ==","shasum":"982f4614617034ec7f8350b40ef2d215ed4392be","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.9ec431d1.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqCCRA9TVsSAnZWagAAQX8P/iIgnzVwWAT0Gvp0hDnE\nI0ny0yC6wreR4mP7gbfbR+5FBfjKJHRe7YVlBy98UVdz8XRo4gGw64O0acau\nbD22GArGtIcOlNyNg+2OkvYzsc22tZCA7CIiX/p+DG56lMAYeC2QKF7hODCU\nchEVIY1p5S0L2Cpo7w9ZATJvGfw8xHBRyhIBQInob5P6diGzzpFf0H0HNE5z\ny8AxMc1ZpXDgElaSTm74P9rc6vjtM5Joq19a83ExUf5cHpietxwLANPPfrwq\n4KglmPm5BYyTSoI7azUBqPdwJxlaHFTVSwtia9dGSBuKt7Iyt3+A1LaVI9fr\nMgHUrsPGA5dZ0Qn7+nAjJps/Rqf0IqvsjP96fAph3Xk6FvIGtRZgdYPbYNMn\nJC5rNmimgkKUbyFK00sbYzKAkBCwJca57YDH9Ib1Q4KzhniE2Ip05/Rc+EVi\nZN5Por2NKw8e7/9Qs5TLOBd9JZ+lCexo/ZXoev5yHar/G672HDauZyxaDz8z\nLy50wAAWh7JJqA0AxDWZ6auOZT3MSlN9ieDSiW3qNfimE9jfQdCNAkGsmBw/\nY2/+ob5gzTFYWpkRlqUVGr+Hn7DVYBW34RYPfQq8/ZX5DwIRNZSbte/otYaD\nshqbLmyhJ6VE6pl0/t5prg+eeRsIdQwJLtFgCFIkIvgboDckjF590mJbgJ8K\nDdz6\r\n=cCFv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA5BQwyrcfAtnbJNtOxQBNW2ZhqVAYYnzVPOiCXyQoi0AiEA39C5y8s+Xl88oHMERxpC8FikICqetptMwE9HjtTJFeA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.9ec431d1.0_1615501954205_0.014419171545344778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.4246c082.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/fab":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-icon":"0.21.0-canary.4246c082.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jptGYqHA0zAQLVr1BHap84dqb2OVAnQyZigJgHwbYiq3WTWMov73vAtACit8cOZbyjbFj2hXoRuQUia6EkyovQ==","shasum":"0c97de0f91987edf6f0c04293c738235baff9a1f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.4246c082.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwiCRA9TVsSAnZWagAA1vYQAJRB2ryxa/UC8ugscj+Z\nbSllPIzOJEpo+6qUFiwQc+/ykScNIJhJcsa5j9nemVd3pU321gBWJClwAO0G\njvN0q9jmVoEVClh1aEEL/DZMKYFcBBQACePsxwYEdq7VqMmDAFmzyCIp25QY\nlNOM2N9bT7FHn7QDN+dPjKeL8c11H2dDbkCiWKQjav779SN3NQeJHPxv8bB+\nOLHZTVOSvnsil9DaVTOlWXGpQCl6CQI7G9GME6XeQVFGM6pmu3I4UxSW1Nsk\npnALgxTwAwqVnjod2Gx5GZqzPAM0uS8c48b6vtwru5DYFPccW/6fO2FPNTVD\nhYq2zQ3kjt4D00JB1qtvD5g7EJZAVFVQSe7RfdNYin9rrEXz4EROQbsYRMcc\nsSXRKX3zc/Dl/nAGr8vld9GMKKPWUWuVF+nIFEqDLxizrs7EhaM3T7PMjCGP\nG6gWZTPB1qwwZEa8f2nvs/SU5hyrYXtuJs0MqTa1BCN6Njg8dhj21TYA53Xw\n5JyV5J99Rpq4wW0/+3FAG8whuBAQqNOX27vLjgx6w4XwCuiTRDF0UJi2ji+u\nUd9tMzFdBukKxJRvPMe3B+IGL2KuWZiM59bNMdE1uv+VFXJfzkqVmkF3dPk/\njsKyrWoBZQfUGJDIjJsmF3O8Q32JZlsM6kaA637TgfebKeTbKegyWyq8y1JK\nrRRL\r\n=LIBA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6VpC45VroYfX3W5ck51AYcnPMAWWqYZuQgSEuD98AcAiEA/NFLfFvuQM3kOMwXD6S/0rGSFpoOLRZ2PEHambOcr3I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.4246c082.0_1615502369776_0.4395966661083546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.2d736253.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/fab":"=11.0.0-canary.1e0653477.0","@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-icon":"0.21.0-canary.2d736253.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-n5IDnE4bcVenLdrbQbmtjICgA1N1aYWVhRQ/3sAhRVgWaxp/Ic1PtMvtnMm5vYknPifAH2lYrEC/YxnHdZwLKQ==","shasum":"df1ebf57fda37df4d08c384f23b7fe1d8ece11ea","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.2d736253.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FOCRA9TVsSAnZWagAAUYcP/2O79Wfg//9O0safinrE\njUiPLS3TjFHLQSpBURpEoPirGy+5D+FFeABnaC1Y1QyYrWF0+IxgF2RGB3qF\nx8AJhjWRwIk1abyOHGH8gLQoRZFNm8rtH4iqg3EfErSSSNbJiULUVjGTVQ6b\nWF5+y0bjevvwwrLeL0LCSj8gBNRRfsBJhqBXrZzIrhe3Z1JeL80owHWXowe8\nwiufIZZDLMz+5Usn7jBVBFHMm8OvnfqImpn3l4Ajl0nEQvpwzCXPS42HsW4a\nvpI2LLT3XHkIaY0X8KiA9OZAWF2A82gq4e/rdgwrpB3zgHSkKOKpNcI6a+Rk\nwBN3oCPtgddM0hD3bszUOfagftgOHG/xqrP+J2fuEkz8P+9PkQ2LhNeJouhO\nvqaeonGjxwZWXpkBFnj4+SnPWMAnK6ZRP8BzwXH2uCQvSXSBC2p1RNLstF6R\nBDGBsryBmch2uRDLmRCYgOlXCcPsOIM006PGb0Xx2+qhpoDjL7WNyT6SoeYQ\nHHW9lXNvlGIJOP9z+CJmJHV9Z3x0b2eJkCUOlVoTmF3yMzbNJBFOKBYAW6Qe\nJX1Jls6bOSwzW+1o9Rt3VfRoIU8qXloAbwMBEeLrORGdwu8rU2W1YoZtJAAd\nXRGb7LqWKGe+CkI8xdkjVSv/+9AXdKQkfhko5ym/Kmv8iz8gkQwG1J7yVqAM\nC19T\r\n=lKuU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA42JMl+EeF2KwQDtA/YXD9kJs2P7JKlnKOfGBWqxxJoAiBvrbKZYGQnyNRMa+AiOB3gzD7RKfKhizb+OAOOId2AQA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.2d736253.0_1615847758509_0.07223785868810761"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.7033124d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.73a227194.0","@material/elevation":"=11.0.0-canary.73a227194.0","@material/fab":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-icon":"0.21.0-canary.7033124d.0","@material/ripple":"=11.0.0-canary.73a227194.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nOfkHGA0YUdnXpOJoAgDaOKeZmoeLM/JXsE2JnA9HdzPp1zvnSCLVj2EmmekukhYQc3xGB49ZZSV9vd7XsN1CA==","shasum":"9e0ce0d8a62590ce25e3c19c6e3ba0558cad9eff","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.7033124d.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPr2CRA9TVsSAnZWagAAv6oP/Ri7TEdPZQ4Rhqc3T5Rw\n7WqokKdmuKpKXBNpLml62kDSqbWgWc0FXGh5TB3a8n9w4igMjwP6kRtLtMlc\nC1tqqQ1DfWIS1IJ6Zb9oEdVK9Ql0IPg7IKwKzguun8PMaOQsNIo6BRWUqNpZ\nvXZVDSF1beF1Fl1VnYXUnyrME/tYq84v3V2y29/D/RnAW/iOSPx35RUGqzdP\nvnGDu6QR36QdnRYBS9tE5nO6/701Swspm52etpceKM+ny5ZaJdyXwuXn/CbW\nSo6G+e9edhOUswH3X1pinQ9l8iJfo6AxrOEOLDoPGVfZEX3UDCjrLupJ6BDv\nss8i3by9h2yzexem8H87cncnd/Zpq/7xl3AArz0LEUUKtIZHMkPOCrqf+Cup\nblre8wjRRskRZuDlfHIQW9wCWyd8FNH3PiNHa4SKn+Vw7SxrWCSVNnkDCBXi\nQ5QMhC+YKjVYseT68h/xvJ+TtFH/pPGnoJLgtOGzqco8QTSoeuvZqq2K3/mU\nN9ldrd7WHdKfG+hMpssSs0IFzwklRVK2ZoMWhMiOSAqDXtPFH2finVa+sxWF\nSmMxWKqTdUsjaFZuG9wawIiqgmO0GU/QUmVhx93toB2CK9YtqyDc93I/Cd29\nO0fgKrUrXq18igUa27o/oDRGuVRwTPUdVsGBLEDSUpnWRYJTgQcSoPtXJqIk\nEyZ9\r\n=1GPh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBx3YP8FqemCUnCbrL8z1ON9w2Gto3fk99JIMdkiQZoFAiANX2xfsAw4+DNATWu3CzL1+89UOQeVM55B0osdYyke6w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.7033124d.0_1615919862283_0.919429674627301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.6c0ee901.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.73a227194.0","@material/elevation":"=11.0.0-canary.73a227194.0","@material/fab":"=11.0.0-canary.73a227194.0","@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-icon":"0.21.0-canary.6c0ee901.0","@material/ripple":"=11.0.0-canary.73a227194.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VmpmQmr5J3uzR165kSqFUmr/KT4DjgBQZiX5GZsqZclhY0gc+0X7PcgXx1V4xiiDOTZkHaw39/vcc6H2TGAGrw==","shasum":"94acd896df48f60a851ede9e3520dbbcabb83136","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.6c0ee901.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTONCRA9TVsSAnZWagAASGcP/0bgxb5Bi2r/TS2cvBEi\nkg582mTCRbbk6aMK+xt+LyM5bijqdH5h8vY5SRw44I+UYc0iqHN5tYjW94go\nXmVKQGkSH8tDl2Y7p/Ks/Q3s1cNgnEcs4NNq2fRT9YLHhGR7V2veTuYdAcrw\nuHdEIOX9ULMjkwH6IXEN/i7bfnlUP6TjzEd9jLLmkqt7WAaIOasb9KGIh7BX\n/wem3TbkHf1M7ZKYJj87Y6rXfqzSBjRc+9S8DZt60CWnrZX2zKg8S7TxLsNW\nwS8XJBx4NVxfa0+QtyU7P70CAU0ILKj9OvKABTLfV/zpFyNtgLY5aZyCWTie\nHMYidQYJ8nwv7MFTVRaZOTUfkQw+6gWhsBsUVclRuKk/vHf9I7+ALKUwzSiV\nFXmltXWE2QvAOlh/AMuv1XRsENT4+wOzOKgnxnrSB19t+aeuN4DqLDqZ+1Rw\n9S7zd1d2PHK5g/+E7uktPwwf5ytTWUUM4qTEaf16pblBQAgoK+2TKE1WGs8Y\nArrJYbPthUprlRR4wxS9ZGM7kSU5uAcVO9709eFk4LLhrV2nY3N8yqmH+37B\n1dcgshwFqk3JH/pX2aoeS6tfMwaOTWHxIB8+2FKPys3NzzVrBijEYiLvE+xS\n16stmFWmRfz64Tj0tWTcHf97BXcIvOf3p5JiwGTLUriG5alM0LivfyZup3CE\n7R39\r\n=2Mbu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdPKjgPnThrCVvFxPsiktgqLmvMxuXyhQBc7ot9AptgAiEAzVYUpyaMs4JQlhO1J75sk/Jqt+WOnzzOpvZIpa3O5Cg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.6c0ee901.0_1615934348623_0.6629185352861209"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.7f0d605e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/fab":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-icon":"0.21.0-canary.7f0d605e.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SW0PBWkJZcS4GbyfPFj6ge/cXREKvOhJog/Qy8eI0JJXaLJYk5P95aqoIc4KtOYB7Xj0VbDx7Toat2SDb+PG5w==","shasum":"bcd685a42503155ce494255e7ab7234c1bd6a1bc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.7f0d605e.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTDCRA9TVsSAnZWagAA+NEP/AvD95Tts0rr52K5ZZGr\nD8MtemYMK4INe78WXyOLNeG8cPO7HDEN1CHsm3lkU3m67X9wYSmcx/w01ERt\n/G+M1HtAJyJJVvaXiIVPMzPyYRLwQARdXKbkRDYgga9JX1a4/MkgOzvFxKVc\nRZVpxArs+kwwvC11UzTt9e5s6Z5jYt6WRLbZngpLOh+fYhwfEN22Pe/dZOAf\nzDBcHRUuSC8WG1SVsiTnkf0GBnwFHeJaBQL6XKUoPGXx4vYxbSo+DQMBxoY7\nZpPefPJdlDVr2ARYUhss13t4Cec+rNtkYL+AgF+vpHnzTQddxnnPB20Id1yN\nwl7f+ozC7U1kLdiQXX+z/h9bhI6XSXHH2VWzWG5lNORMBEs5WuBvpSaPLsbP\nNKR+rNAn76Z0ImmmszTx2Yvu4sX+C/3XuXMBPiqKXvdZnpXUcVFw6ACsLx8u\nCpOhx/YxN3U+dTQFToV0VBxDWvgytgA04UtAQdzr3hiJ7QmSu1qhlQ5p+kwu\nbSUSeFM7RYMlSqVD3w1gaefcMGPK7nx5eahcKSkVDpVeIFdItJszu3LE45XS\nqOIEP0Ietayneci60b7fYzTyAYtfa0D8obMmSO9iSvjT7+qyH6TAA0zR1Q7o\nug/Oq6QcFH7sqcsw2RmwvwxefPZaZl+Foeg8sb/DabWOYCfjAthuJJ44Pb6s\nW+Ch\r\n=MZGp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaNx71tPJyZ+1uGcJK5bPMIoEPg/8XO8GW4uadw9WXZwIhALf9vSo+dX4Mh6ELoOKDh/N9kp0czJc4uxxKo7cSdJxB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.7f0d605e.0_1616004290664_0.4218219870956432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.572107b5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/fab":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-icon":"0.21.0-canary.572107b5.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xTg7xtPtSO0pRNPUrcuJbEqW5DBifNMWG7YddgtP3nAz5Fd33uzoll7FibdWz4GLiiAy3VuDEWOqB7oTfKKdIg==","shasum":"92eaaf5cc266b49d817341fd28ab391bbe34d617","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.572107b5.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gwCRA9TVsSAnZWagAAIVcP/jnsIjkGkDLvaD7ALRoR\nPSgxLo2uzHzKvGFlSCS2dES6xqDAbkOv6UMLzgID94xhnAzUGPfof268i4l7\nybTaAba/HDaJ7OKstTMLxirMfdBVIqNAdwgeyqWsnd5qWPRKHWnntksuJXs0\nQwP2SmGW82Fq5IKqEVKttnn/SKS71euDAJJ7LSbaUEaa6iQH+A4nHiwb1Uib\nS2gksq9lVaUa/HhMldCtxLhrmx2FlmpU+5yV3YrB0/PrrdZdoI7lvnTeWiiw\n/rkgDC1oB/TWRYuU8c/wxtJffNhdeNijm++l2UQPRBua4QVOTWz4OLmsKKGL\nn3h/PF2r64mkJb/n35ECIHeMWhgxX/39KcYgy7jQ6DfKgd7L9LnhU+taERim\nJVEvBa+B2G9EZWIDALH5r0ch6gYuPjXjS/NRLfs4oEmmJRR1d9IoteGxUBA+\nAnjHwSLygLmQsqXW1Hp7QUbBYeppZIitJ+Xtfskt+m+sf5MQNw13UD3NCTNT\nCwHpyek1+Wk/O+Zo8sn3v0xCfggqQ+EVZEKF6lHV+OzOZiqhx/BuJuRsscJG\n9Eas1ADm5aWsBB7799ykDB9lonC+HM1VlLbdjvvvq0GBXuWoUGxjIGG89RLw\nesvBu64HvTba3h6KTNo52TRdMNIzxcRHnX1ZQZo2Nqzz1fLcNLjyQWtB7DVi\nNp3j\r\n=CCpb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSmbq5HlkrYF79jLHvSwpU1xKCvqVoQ4/uf0BzfK0QZAIgb8YdUK8c2C0iskkCrpDVXDbD+dig8tFkmFL981c3Og4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.572107b5.0_1616111663989_0.3023243124357604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.b7b220b1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/fab":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-icon":"0.21.0-canary.b7b220b1.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-t5P4Jm4Mm17cx++C/MPOMqvoKLa6rGxIcYUfTfnzVkxl6r3YtOT5AdXh3xCXLZeZ7/nqTAD74CUvQ76EoRsxSQ==","shasum":"5a02dc05f2f8687b1c18ddbf10c160ee4dbc72be","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.b7b220b1.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+48CRA9TVsSAnZWagAAnUYP/3TtdF/C8OiKBhjSJxjx\nl5GCwuWkqpOWVTW7deSu7C95M202IeIWLciZSNp/DJHWCZfh6MNmENKfJPI0\nGT5RaedTDRu3FZ2x5ksAp4rTV9tHbh7dsdT8M9ucbSigJ56iLb9wZ1CcSVqD\nkkx3c/MYBeiUdv4TEvCt0w8O8LM9PZRUFeUnPf9ioyH8QLOTvEYQHJuBm7rR\nirNLf0W4S6gZRIsXtGwzO9Rce1R4/QqCMNC9iUqJpeP47NuhDzcxG1ezXPMP\nd5cZquYNUxeNIrg78mDxSBE6cFCrFLVkQP/j21CuNnZQOKFa6h4ddVPOLZDG\noVzfp0rQYjNl5FZz/2pMhG1G5fOhxHDRyk4KWYdGHtQ0PJHjSdr+RScWUfhf\nKHhTRPExGOTyQwDEmQ9EkkOZdR01e5JinKNLa2Wgp2Z/hZzaJOEPANtd3g/r\n3nV2dvpbfheYfbhp6i8TaOfBHDhQRbSUxURvnCjuwSKIjbFFSiIdqFX8h3aK\nG/rAhG6v7QNaJbPVPQtVYZQXhT1RAVkvlDGRYUWR6vPNsBq2Qs2IN9dUAsfA\nJrm13PNoC7txcHUP+8C730uJoqXtLZgUGu/tW1UVtpG+mcbH6T+v9m1Hm5MA\nECxIl5XdA6ss91Hlnrps/J8d9vzjgm3zfWQeU0Voe1rU5ae6UQXYEioQNw/Q\nEpVX\r\n=xD09\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNp4jy6BMXZyR8N7pXVK5Fu+3A9sDveZ6b8vipzjiYLAiEAyhnYepQdt80ZxjsAEPgkA+6amo79x+wNdAcjK6XIcJ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.b7b220b1.0_1616113211689_0.7633145493955447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.233b2de7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/fab":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-icon":"0.21.0-canary.233b2de7.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4+EEz25Ompux5fOcX9NPn7Q3chZka1hgdKfYa6SLBWBM3lQIN/6DfAjaptYI6QdV2i90kIuLkFvM1ve4VF7Ogw==","shasum":"7647ac02fac8f056fcc36ded533f95e0c1187a5f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.233b2de7.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2sCRA9TVsSAnZWagAAi8oP/jKBLoXHCBRvl90Z8Uyj\nuAjpPupNmkTR6Ir5LUDDlAScovNriHDm4PGX0pGJXHV3Tvar3cHILQtgP02B\nwh/zB044yyfjPptd9tzkasq/XDE8fnwLEp+hDDJhj/n8o04hfkP2QZsLhp3u\nbE7dp+2E6qOXnzaFJJSH293ZLocVt6zdUneXI0Fj9S8V7XeyH7D2BLHSZVHk\nIHHqJuL5Nu+szTMWLCaO7A/Wx+BMqAuSfwdD+gTgvgJSScwJxCP9kw70h8TY\nAX6pHuJa/WyxVI4WngLJ/aDdgsrtOKr3geXfyJ096G/T3lXrDMErcdF/DKhO\n9+kRKwOemmstHoWoOPi5HEnF+q50Sk3ahfy8gO1DFehfA9tprB8yk/L9LNnA\nx4jiMmSA8fsVuehhDeTt5cd2d34zybscrKJBBMB/dQP0b4tlvBow+k6xV1Jh\nh/q9nfEETi55U+9jUYl6nYjYQIru4bDJZNbzxEoX0H4fjWw1lavkHHdOhv8I\n2ahzLxh9Upb1ptWEtDbAnKYfzTt3qgEX9xECOJnzZdiGLzzAMaNhVL+Q9D+1\nc6RsNM3jV2kBbOP1Rs3563UfeNmglrJpVmrjWHaSnQb658xEjTFzv5hjuc6t\nJJJHWJ9wT/wEOSz4wENZ2XznmimuC+y7U/PMqe8rwGg13W/8z+fFA3tQkhlg\nqBiF\r\n=H7iy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTpimDDyt4y2wd9TgOcMmJm+nY3h7AjDMDUyQG9xyv6wIgcka0ZLd1hKNTtabfFUiQRjnfeBhRGO++ysZ5ZPeSDTw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.233b2de7.0_1616178603721_0.7880406704405407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.0c1a2d97.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/fab":"=11.0.0-canary.941ca3b3c.0","@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-icon":"0.21.0-canary.0c1a2d97.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EZ0cpDrgcsMO7gZ9UjymU4M+P8mNBWI+54dHzHFKrMVE5dVOxEwclhbZn9cV7NF+4KmgUYWszmWIws8Vw1VKAA==","shasum":"7da74fc2e3454a0d595c4166bdae93ade10fbcbe","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.0c1a2d97.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXYCRA9TVsSAnZWagAAXYwP/jel0sE90x/EmfXj9erN\nZvgdrqtp6hb5IkfUNOd+5UKp/mOkUyAco94Im0FBwzA3X9hJGrGLtebciVvr\n140kMFDYqur7CQ8H8to4VrJX75r+WHr2LcWOMa1CobuESqGqu7jC7tjUmWCh\nnSKxsVvKY7FlK4cOp5wWxSkGACfYs4to4gMvL0srb/NOTYWR9TW2J+LXHNbh\n4KYgf70eyJzH13eR8PX+5mplvFgbt7UFvw7W/hly11jhtudCB6OSWs9FsW5R\nCiJS563ToxsYfDQEIIcTJoHeQ6kmq2OchZPidZHIY0KE3uqQACYCGNxuiJEp\nocutuQVnO9W1aodTPWa4W1m3p77mBcVwJ//yu6s6X3vKJ9rvlHnIQj2SF9hE\nvsFbxQRiOMpzrEWF1poZ2QcujIW+MUdpQmGCWoIb7U8Q5hw3B/I/kPTzqZ/Z\nLV94+uNLnBg1tEs8+1z0Fu6xhgteD+mLHDBd4XSo8foEQKspYIGdyY8h8OQg\nAWWj+Lls8ZibXkN5D4ahZKv1yes7kOlkWwvF5tTjCu1dHOPLUVIk6Y/FfFE4\n+dKS1Z2gN5OtcVCB0YNLXrrX7J/ZaCAZMRGg0Aeosqm3IbUGs3OaKDOKi9vP\nDXVbr/QgDxUXScQbaBg6fdPlwxYNOKRGYXZMr6GfsouQRDrT2fbtjrEng5in\niR/o\r\n=b56q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDY6/JMgsvTC3e6N7A5/CI1wyvhhV7sXk20I4GgJSAkzAIhAOX96aDuE5yvj/BIa0oJNj6sBYzz8z5hh+eFav30ox6E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.0c1a2d97.0_1616188887648_0.11585227862398839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.57ca2e73.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.5f0fc444a.0","@material/elevation":"=11.0.0-canary.5f0fc444a.0","@material/fab":"=11.0.0-canary.5f0fc444a.0","@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-icon":"0.21.0-canary.57ca2e73.0","@material/ripple":"=11.0.0-canary.5f0fc444a.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-gxAwox3P8o6x7fLQzTy3o7k4wQICtTG8t64ba/STdlscfwQLWvE0OGSYMqX3FrcfuEqfQjqBQPI7N+SG6uYmbA==","shasum":"a2d0fb22e6db89916565b157517f1250834e79e7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.57ca2e73.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSh7CRA9TVsSAnZWagAA9IkP/ivH4YPCLLO5o4QG2oX8\ngg7nbfU6ozYeaC2PzihHtQhjR/XwFrmmSORC7rURjjCP2NLMgNI4gTmll7ud\nFk5mk/i02DL/R8bqn7WmpZq6id6Qq8c6bw/7twHPhRAdjP+YYH3gNj02GsBm\nr3ASJmPl+pC4pFthP1KARK9x3TP2ToY5755g/4KQgclV4JtjAD+3iHrqW9UG\nhbhe63Wc45zfjZJMqFJYoK8V6X+LEmJZLQ8TOdtCGr9gU2zh+mIj+eb1rdPh\n4xIGGMnfH2REpnSM3SshFRTY6rrSNocuBlYjyPhWLfX1INmSJufhvChAdXf1\nU7E5OuJ13uvOW3wC2F2YPrA5IVOcp1Hf2Ti/nlYahReJMjYgxb4+JFNbxwnD\nRNINXy+hLQg3r8FQNjTCqvqtY9rHTlKbusWv6FnWc54Hpx5wplTaEEhir/Xg\nbzpkev7wvGg6WSpI16rvU4XEmD88LnnxQoZp1ZCP5ll5uTu/rpmOlEucUn17\nZ9PTosUQ7Oh2e9xqtoy1x+rDY4q+heA4mqwY5VKEGVO1UjqzyMmVXcpuilv5\n5fS0198Fc4zm+NIog4qK9Hm9aUe2+2k19x444VwG91ksKsCaShdc8LZiPFpg\ngIW6M1hsYMKYF8iyq3PcFQ6zqr30s33LqEtWpKsWMtJiQbjkMotepaDeCrDQ\nx4bo\r\n=Xwx0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDjG1sQMXjeQULYFLT0CyFzLuhzL44zW1yaByPpDLdb2AiAb7VK119dM4o77vBNRabdEmI4clpQB91Yz0nQ4aTCkag=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.57ca2e73.0_1616193659029_0.10746212973734304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.5c058f4b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.8943b991f.0","@material/elevation":"=11.0.0-canary.8943b991f.0","@material/fab":"=11.0.0-canary.8943b991f.0","@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-icon":"0.21.0-canary.5c058f4b.0","@material/ripple":"=11.0.0-canary.8943b991f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-U7xHPD4IAhnoLdwO01qsB8lf4NJBG4qDLAAuaxkuuZBTLwKGoukslHNwTeQXHtvNy1oXcJD7Nnnr6hBxCKaM8Q==","shasum":"6ffc56bc09e6ead7151f655269848a47a90060c5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.5c058f4b.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnT0CRA9TVsSAnZWagAAX+wP/3Vg3E5lMWH0l3N6OSg3\ny0Wu6LXWyLTNtJ14KesW3FYUJ8DGz8uiz+yxBAOH4dr1tWyI7xeXhDjXlQj7\nwPaklLNNmZF3D8vDVk4cjaOZogZL68wPMrohqS14yeBseTHTcxmcYhAymuVk\nkTH84ht6jWlBihvGg+y/foQoH7p3aYy4ZURwf2zM0K/TEF38uIGA8ZvmM4qQ\nlY4h9JzWqAvZxN4R4L/r8Ere/FYNrNaOnzq7eYU7uKNBjnaxd9SZMrE9ZY/5\nh+XGhHLqAZlvpISBK2w0Ed9hbgxVUdFLNI7B1MLWSFBAb3qGblNzJ3hFRDNN\nWRnloqZ/u8rfTmwmtBcnS6c4Zq52u6GbR3ohKQ1uNPJQuIazF0g+DwbkF4PO\n06Q9VHMq5UsQDEb5wGkpT0aUvd6tuoJL185q3YBSzNFyPB5LfhBlJoZ4/noK\n/QBlI8WHT+KbrRu/5ZOQ9Sxyr3B1gXH6h6mHiJup3OQWDjmUJnEY2EebCXjm\nRvcRhGSC56vjB7AjzdCMin9S/pDqWq/qoxdHIlQSs4wj3XIuw+HIMePz2h0j\nht/f8sqWQ4cF5xLCG6lGvBRX+RLZlmkIABjiLk53Q+7COm9EW0uXS/Sqbw2o\nofAaiX/YZ+wL5P9t9R+Hex6Wjdqjl4yJY1fUnHI/zbBxdLSIZFmOp5rqfNjq\n5ZdK\r\n=mRup\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwx2ZJnHAXFOF0ts/jSAxIX9zEq6oSWQYbDrqiEDazvwIga4ethJwdRjsVK8R9fb4fQARLt2yZm1ZvigZNiMGAPvU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.5c058f4b.0_1616540915807_0.4961409913387418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.e27ef7cd.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/fab":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-icon":"0.21.0-canary.e27ef7cd.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7Rmo5/X/pB9xG8RdoJBr2h5DhhuQdfpcrLduEvBPvCGtAnM++2UwGDeipsYpKom0aBSEwEi1IjSBhk/9vrnR+w==","shasum":"4a4f481c7107cc12e5567841bd0bdb88d6cf8167","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.e27ef7cd.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4X0CRA9TVsSAnZWagAAEJIP/i4mcN8YNviEeSBWYWkz\nb0C81SPdVN4RFM7leVNETITOcLEwgbBhjnMfEcEvGHzgR9nYugu6v0ii/pN9\nxvf2ZlFwYSASF0I6f4IN2ByOQvqt9kct27jVkKltq+/O6L0Uw3QAoOWWpKqo\niR8mQZEXxFkedForvs3HGrP+HYvcrpFqA+26jj6EF6dEbRBcGaG2yrx6baJ0\nEDHfTO/ZsL3JvyXwToZXuGgazfXdqpAW2gF02vSkqu6MAq/jBKvha3BcDpoi\no54SwMR0F82CC72AXqQRwAIQsu/JJrKkKlPkDDQjYpp87yyfrETC0QghuotG\n4AVj5R7+Z44WHkRtgQmV9ojKe/P4jXqud14fAw6ECnPa8sLC45NVjzWEENqB\n0s0s2jKsSdW7td/EvNCXsp/8fxZtJhE0IZ8kklpgcrx5oMMHkr9HMBQh5daU\nOiHk+0OJSlzjQnI+CWLd/ojVq+qlwrBr8W5ubIwFr16gxLt1h2rs96hVF4LK\nk4pkfU10dvXCYGmRiDac3XmZwFa4BIxAc3xzfflv+rPKDR7f7M7PLov0c9Gm\nAxepOIP0ZwMl8ruIeVHgPnveCDeG0fJ897mh8pZBBsnPIrhVvQl5M1b0LZDE\ntWGreV1KJXb1VWy3Y5th/xVdXQe5XDSoPBxnymnauwwIlJo9IUtit1765xGT\nw7sL\r\n=FzSF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChCsSflJJhA+mr2iqbpETW7GHOPhVd+LNThGimW4gRJQIhALi7zevQZshALtFf9oRAa01B/URQ8qBc7qJTJ84NSo2R"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.e27ef7cd.0_1617135092385_0.6986851196175923"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.15c09e74.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/fab":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-icon":"0.21.0-canary.15c09e74.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+YVDYbwBDxdMOeAF34KfM+TWoyCq6bvzdSc4ibsGt9nFqJ1lmYCHmIPMYaqZFbDiQY4yIUzqYYPji77h5j+Y4Q==","shasum":"bdb437d4dd523c261e6edeaeb90914f71677f8e4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.15c09e74.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKe4CRA9TVsSAnZWagAAFF4P/3AondXPP0us8q9W2tAq\n74HPVkujL8IiuYDnmvRGLpQ4uMy14ZBUBcG/FU2zq/l8R/Jw0NeYLLgJSjRv\nGWJxorL1FwazYmvK0i2CLvpFPN452KSqMdS0j4p/TgYCINZ40Q0fCqHzdhnD\nLxhw+KtlC3bhBm46zKhRGeJNIWlP6t9e2/Ktf5EgY+cUAXuLkChbbfPuJNl7\nTKdjVzRHFeckc+Dh2DScJBD/NvqswaLh/TgkUqQ6L01aHj56U62gW4JBPUd7\n++hAVESRqPuBU/zb696XU4SNhqwGCdRJqv/4L5lOhAN/TIqpLaltk3/PDxhm\nrqhF6OGBGMeCMpqFxAaxIPyPGLdOidAExOx8EEMyf/OmcDTn/V/7aia1C/iQ\nZJyNyg7YrfoE36ur8XGDLc+PoeHH8q2THYuR8y6Ghp1uYc62QS3gJBdlg2tT\nH04Ydwc3sxQ2pHczFtFkwiHnXJ00gYNkfEDmQySM/0Io4mu+Fl0IOl2BX1Z2\ngS7ObLMAWBULuv7v80Liz+f66sno+kqiFGrcOJYAxcLQTOtmyFkaAA74koJb\nOVwA4fHtwapGhxTcTAsq1V6ojFsuZSf91CKIs7B/xOl/z5T30VwIlBtVDK0Y\ngZxznkf71M2f05WziFgI36/VZa+Df4V3SSsZIxaqYg4EGjyHubG3bBdv8JQs\nknde\r\n=/DMo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICA/PkgS36ipz2d0qIsNRK7mlN76OXoILv9vcez98Q6tAiBsdlKLLa6v5798y0NPENhwFdp3s48LF7+j9KoneiB00g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.15c09e74.0_1617209271780_0.7288705120996839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.4dc32be3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/fab":"=11.0.0-canary.dc9c84023.0","@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-icon":"0.21.0-canary.4dc32be3.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-eooBGF3h34ml73BpScvpURxgdmruPV4AW1CsTJyde1M824V4EiNKdbnguPOkmNS1SsnoxNbGB/ffaSWHu6RmYg==","shasum":"ce9c0ed392bc29d5ed10cd25bb86d57013c6989f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.4dc32be3.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpHCRA9TVsSAnZWagAAHOAP/jEeEF+hWroF7csHJA5W\newG3Lv8zFQjwNVskZmKPehaU5fqGpHsXeAXR2ohVT/LcC8tSOg7O172Rvc8e\nQ4+DiyXsXkEBy7xa6Da1PQn+E4D9/GlMLh6/PPs/eS0F+3dH5q7BNHURlb/g\n9CMIBQnF40KV2p4oXGcgBPNoVvPiVmNtoJqa6/23AKilulB44eOnLgeIm36U\n+dU4jwNStLsQ607D3g/lKyRG16OearJQAtDYfiOAgny+V+gH5jM4icJQFnmy\nP3wjZk/Ffdk/opMDJpnlZOhEWH0VO3MtBJfoFF5lDJMl1PzHJSpUdG++qYmY\n28+5Q2rZQXf1hrUTm0ouaGbGtmrFbQGaIzT+HVwBFsNYAHYrDjA5y5f3hZ7w\n+GHF/Ql0s6D1R974SjuF/IHw8Q28YP5Cp4dg+Z+ZAavAGrnICXQD6D2uQ7zS\n9WhdTyuEz9efZoaCLTE6Yz5HbhmwYypeJdhnyorT5Z5q1ek3d2hCBAAeqyDE\nA2dthhHLu3muhPD/FVoqrn2xeWT1OeMGs9Pw5JUI6PcdD3c+m9DpTtPnFHLY\nXj1xnygu4u9/FfSyXkm90WXVb7px02/BwuBeLhLT2QRqDfIvawfTSv4ofDCy\n9cimsfSV+e/lKV8lx/vxSnTtc0IwQZo6H7LR9dnmR/XdWuQI/EtwQPktf2si\nN614\r\n=VK1F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0i1Q2vNUKCalCo38MRf/cKeS6OXWQalMHYwz3u9OFlAiEA8zEaOOgtL1hi8gRm8Vn4m8pdfQianUBaUH3Z8bXUceI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.4dc32be3.0_1617234503299_0.03167315917029967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.4b717f65.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/fab":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-icon":"0.21.0-canary.4b717f65.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-qDtreOLzEksSsVP40ZG81jT2XJfsOijoQ0u6bCi9uESdmmutGsMKD1MuDpap4RbisdqIw80zhlWWD+7K7wDBsA==","shasum":"a5a01d38835efb82dda7595a1aced351e2222413","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.4b717f65.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2LCRA9TVsSAnZWagAAiCEP/0XL3d/APhs7Z8497PXF\n0Ohbrm/QpEYTIt1HQTPYdRUbWxZDi0UKMCUfOvuINuv/+ymbuPxV0pEgZZsN\n65gdFslkIsXr4t9HuSyy431I0jooNvQvmw4GKQWGn09ms9LWM/5eML1sJXRo\nn8MUYzjh9fxON0DknEQjl9JqKpdJeLI/2oOtmU/ZBp5M3rohR9v/HscejRzZ\nqQcBZK8XHCvTmr8PJXw0JarI9OT7Zf4TBTwBBToFEhR+WOQBDZwxb6G/FDHr\n1fPtE7/54mXFHvp5ztT3Lj5mgGUopqq+czXjGP3JUubJ//auxtWSVoK3HR7T\nGb9tWMOg3xHHoWkZ6nvslbtwl3zhUck/tnLC9D5cqyEjNCvBTffNDlVSvBOm\nNGzlaqCsfNmZPGGfJIT/CehyYWYhrjrTAocysPek/Hh9vt5ddxx9MnEgVl2V\nnDxlj3BVuEfV3gTyYvdeATxzQ9xYdcAeigGTYcFJQEGYsAeMWFtzwssUQ/CR\nsXeGg75aaJtdTaQ8kKhXStcs5+lw7R20d5QmA3aiywcdcybLH1sMzS/IHFUF\nK/SLK2uZlq9LCvAaYPSoQU7GllC5C4aR2YTH6XXYkO57iR78cBOR3GMYz0XX\nDgJ0LsD+DlqQ+UEvaRFIXzEgNnWWV5nqnoXlmnmS+rauYv+J2kpmBn4H8stL\ngUMy\r\n=YJTC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLcFs525g1qfuGig6FJwXM7gIFcZNgGT19dOZww37ebAIhAKsYiAs3o9jDiSWLXeBYI0Ew1BhP/N0RWSegnX8I82VC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.4b717f65.0_1617300875415_0.26215872660019346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.c6870f20.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/fab":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-icon":"0.21.0-canary.c6870f20.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xpA8eCrsFLvI3yRIsPTKqdJlA/xWpbpmEyS81jKtmr35d5fbVpDORUz6R3Opyryx4UexP5BYcdT4l+kjNoEplA==","shasum":"a6a112e6a7cbd533dcb0e43b282ae90930f8df7c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.c6870f20.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpVCRA9TVsSAnZWagAABUsP/juJek+YGDn/KEzqG8Zk\nXTqea2wQawZwGNmvRJ1j5N3QLXhWGijcN70rNZJ6VmgtSMw2gXoxOA/HUGVi\ne0SAFdIrIKOBsZ4KFNwkpuSLObTnXBUfI2WHuRxx2f8rMPl3J4NDSyY+NDEO\npHudDXZe5oZ0G25gCZBicEgckLfVh5Sehy3GHMWnBPa4jlSnD0LNNtLt5zGJ\nX07jjhyq7OTqs50Ia276LrCATHEUnRk6dknjc5Cr76WEKIlpGsmcSQwQnja6\nLf75+rxXj1xNIQilBxNGt759cTEV463MzaR3ckzXPq2gXZZ48QPaQn2FPE2I\nuGjAO8VQMDft/n0rgm1V9BPdwSVgVLotTvwwIaAq2qssWK0P+EaoQs10P5C8\nGZfpWN5HJu+XeW9mFPobxZdqCgh2TLwu5byJVWn7e/SI6wV9cnStSvULsPLv\nOEi4g2Uu78CT5dJmXU2Gf6WZRDx9fQ9Rc0Vz9OacjzX2B9c0TSf3OO0hLY8a\n3FhGsegdxNTEnk77qUNN0vNdMO64x64Zm+5eW+2S3vi3IeJo6Nl4oxy1l/0k\n8cW/9PC1+UUIqtqfDHSSb0L91h5Kid/DSpNv9T62ioD7cQs6IcwRvhU6MGI5\nSYpcVkLBluC62cVfcV3Vd9Xx7fgrf2jm1EW7PJbovm7E1aZIx85/hwIQmlSX\nXONE\r\n=MeQ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQnMGsBy+IrgEQ7nb/R2GkP9IskO3SrskyRSzOlCP2RAiAPCgFcR70u7mFpUgvXzb5CwBX3kFSIU/x6ZGeJdQ/lUw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.c6870f20.0_1617320533350_0.7657603510040529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.852f873c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/fab":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-icon":"0.21.0-canary.852f873c.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pNOp62Vdi3ifxewmWaJP0mcB7JrYLjMb0dRHaaeHrsabYX7OBPNxtlqMWxPtQyTY/WbTqWaZDVmYFnrG5u3N9w==","shasum":"9a0054c63cdd8ee4a223e322cd90da0c2cbc3f7d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.852f873c.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqoJCRA9TVsSAnZWagAAV4MP/18dwU1PETYLUsmVxx6u\nvcWT4J017KtLXgb5P9AHSsKa27JnluenefdjJu5Fx5SvBgrA8GGP6G6nT5cq\nj3fnkqP2Gm+YCQWs4hdT/X1sd9Anw6mLowRhn+9ulfVWSW4wuvNOI/7o74a9\nHQYoBxBW4M4ZsqAgxGnn9BbrGRb/dbYdtMiYwCO9HR4x0DeTEnQd4pRdkfeS\nsVYtfScVyUlrGIwyklqdGFJJbU9LHKHhbn5zQ2v3o3SB2MDrlpDOt1CWXH/o\nNlMOAHvHeikFdqkT+KcLKPTzfg56oY20ArSl+u6dJLAPFOrP6nyxxFon/gCI\ng0H7Rii9z+2hwGREY503vK7IDt/zRf9axlNfyC8rXawNrbreEAVRnWzkALzd\ntA3FvpwgYznOc3yd5+VVVVpLcmV0jwH+KoK5Spfn7jlNwLvlWXAxNCgSCnpm\nJhYWJvX7kH6Z4T5WHvvW8v0g4naKy+24CBGs5ZUqVUcpwXWnk0JE2nyZo6eW\nMuC4qMEGfMzB9sHe0gGeRF35ZwfuhlwIAdt9ctKmcueiyUoHzLRDPcseJLay\nPrDhILzc9Spalr7juwoONFewNdTlKKVxEFTyO6C4op1MAPiTke0X4bgskV5I\n913WNUxwsXfnxdNKzJ2xtCKqUlPL2uAIczpxkgi+YZSzu9uKhjWqubVMAVNz\n7yZg\r\n=yBW6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6plffm4Ruiu1dC10Zu7PMHyqR7LvMZMucsji+1QWyrAiEAp34tlUIHj99EvHtooy+EhKDT+ljSGffSYJk/cGGzcjE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.852f873c.0_1617340936945_0.19784527042245248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.4a674a1d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/fab":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-icon":"0.21.0-canary.4a674a1d.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XnNwsP91S3I5AOF+1H5HnpU3TBI8SQqjL+K6obzbHGM1+vx+o1wWHVwqbUyfd49FYyp++GeZfFiEPFQBhUuMoQ==","shasum":"e84d9940604fd86e8eb916f58a272779302044f1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.4a674a1d.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3PCRA9TVsSAnZWagAA5hEQAInHFQU+C2v6oYN97HX1\nykNQmClwii7JaMP13hW6doF1PkkrN8ysICcF/sn7vM6uY3HaRDhFQGERge0Q\nrRQRe3+7hAnxhPagw6UNDrh8/XtKGeNth+YpXan+3kXRxN8fbbPWPINjSdvb\n4oFm0j+JBW24kfSoexgXz5LWcB0D92vzrWMzyk8StT8P3NqVm+078m6Pk1iF\ndmOyl0dKnJu66df7/KEWNAnmPtR2HYgArPJ0ygWENs/lpnje1KKlD6GvNYY8\n5F0p6Y/7bELipxtK6OOr3WsyvKlVJWUol98Y2xJf/9lee16JO19vU7RHlmVc\nneXa7B8iA2FjYZERWpmMtfEhdwI7RalzYHX5gjVHHsGH7HcfTEUPvotpfGXl\n0k4I1uMnSbT8Fnzgwpn5I0L2vn9Wn4a/tqPiqV46of4IzYkFoa+/XhXs7kLN\n+Aw9GdDoGLXXzlTwyOZXdU56FQoFCW9Em3pVd2l/V4HhSQXXIVukyPYaxpu7\nO8bjBuC/MiYdRLGBEkrD4Vz2jxY1rzU7fHOHJQy/MLhv90jYJ72rntzBZs8S\nhb6NLVPCh6STKR7NQ3+43/iHnxSKchiKKKO7rwveSXAPksBeaU8N0f9ZNjNa\nIpTtXKhw2KeNQ4iFeDlfib41r7W/dcsnUCSn7SE5TRe231koe8OGekWguGx5\n5hNI\r\n=CA7N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUR2b6t4yN1kZtSExuv/yvkSbRJEGE0a/pb4yInyXW/QIgZMRoDRa51O5OYq/bZwQiCB2lpIDEawc4IFi4Ovave1Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.4a674a1d.0_1617374670822_0.5860676714179212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.c5b29ff1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/fab":"=11.0.0-canary.24609b822.0","@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-icon":"0.21.0-canary.c5b29ff1.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YsFHQbezmV/4xBT+wzTmJaMb2HhRmhQqsp2uNrB6WodY8G8ZKSnl/sjUs5XxVxUjFSNh3oMGxH+791VsqIcTtw==","shasum":"09cb81b2e0ba3a6bb86a89ca8b6dbd616d169722","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.c5b29ff1.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03SCRA9TVsSAnZWagAALxMP/0mtAjNdGgW71WGPgGkR\nFa6ITCeoGFriHauxA01cI5CE2bLN8OwGhckkoWZ1z/+QdN2SSB5urwMgmRmn\n+BwWCtrz3JkOXUcR7TxP062btwTGpcVeUeihkeAJ0N+7AkIG0t/Nb5sy2k9J\nVrEuKbKVhd4xY89uAN2iDk15Lf/xlS4I/KgdSsmGa06yD5DOnXaS286vS9Ht\nVl0kCwDVNsTFzfuO6Y9FeCoxsmyvC657Mc+ba9w85egoO3P4ni+4/MYOnGeK\nSrRpbKb0vfQXx5WvqaVhUqEiwUrrtf0N3dbHuV6U0lR4RyJM4KpULRCwtTwW\nkRTW2MBPQ/M+5T7j0ZXDbH8tp6Rz8bZqBjPFLO+eT/hcEDZ7h0+4eGKRpa5F\ngA6jwr5bv+fE+O1mYmcfZweu+RirR1Z6Ly1sV3w6zVJ53uKZpRMedUpDSkRR\nFJkEw9R0FZEiTln6mxi2rOwoFANnG8maPv2YE5CTxvCamizfLVLncyb9j/xf\nrXhKcEZIM145T91EL1gJse0TleyVUJfow5qTuRfLi7FQ962KaRbkzFRZzQPM\nfyhvtXYB44OTO1xdfaQYllHYu6fXMNDRmavok32r9at0lt6/ZqKy26494gCg\n7IIrNZeq3kswcmMZS5+1gpFygl2uG4XXzYFlSptqs5HGqV0OsWCKAi8mpr/o\nYyAo\r\n=em3s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVpYHlXcC/R7L42YoApVt3GKh6cBXlD4Nhd1mSebzNrAiBK2O6IDJU5kUKPZZbF9TNskORoCCBRj3SAPmADAO69kg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.c5b29ff1.0_1617645009883_0.6595058848034812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.583644a6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.94f50b260.0","@material/elevation":"=11.0.0-canary.94f50b260.0","@material/fab":"=11.0.0-canary.94f50b260.0","@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-icon":"0.21.0-canary.583644a6.0","@material/ripple":"=11.0.0-canary.94f50b260.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-q/772SbPeuYWCr0BpMAx8XQYMIGpzyXAntiPJn9KTQzDIAT+U6FH/8IbRVkiFAunc15xjwRDGlvvmiqfe138SA==","shasum":"385f4ff23474080b175d4fa67e822b3bd21da0c3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.583644a6.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04RCRA9TVsSAnZWagAAv00P/jNIzzaevHQSzbhhmBSk\njuUSDFPpfL8k0PdmdEM4+c46PuVVlhmkdyQIc9t6G4sqcLIoAzjYhL7Y5y9j\nActCWud0DL5tZd63Kzdu4PMsFcS4oCZbNCrDV53e1FFcsi03BLev4rn1+QRu\ngQ6pC4Rwb0t/DCv0WTv6mpcMoNZw40bcVPlrsK1SIXSmYr54RUPgxwlUwoli\nUmifUSpB4aqj2Lib4rIXnX51KM40KZ5nid4XsoUjRB+XyPqJ9+AJIVllj76p\nkEeV2FDWYsde8q+x6631DC7GMTprRgAaptvX29pQwEhZjO43Hdjx52VSPjFt\nMcqtPw61ImtvgIyGS4F2/yu4G2BjH8E8eNEnxvvsin94VfAlNZvdFmF7Vj+8\nmpKBi92FuAssM4KkwTEA5V7sVAnYvk4sFLHUgiOmfvmiqwcrIrKoZKINkrM0\nfUJjJOp7e8eq45+MDHkSX+LduPa1BfcraVdL/dMZoDl6ArMoLCgceu7GgNkD\nYdjXetvQGDCiVfsNjZUcvSrBE7nyhdBxZqoa8U9LGa/wqD+7dd1HZikWZ1cA\nqZHiHm20a8Is+lJ/RSu4eWTFOGJ9l1srK7vVdKkJV793BOhybOnK2YdOSaoZ\nYfX9yPhO6MEZU6hd6LzGRpRLtoSdF1ZFlwD3DLamvoBEQqEg6NflZU5L0eGJ\nHNMn\r\n=itRs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJgY9X6llPEtg5HykPgtQ37XGPn6AdbZX98ViM1qv3SwIhAMzTltMhJvuntOtq9jh4qWR+C//VwXVurg7TBR99qxvG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.583644a6.0_1617645072840_0.398861228572295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.02ac1e6b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/fab":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-icon":"0.21.0-canary.02ac1e6b.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-K3OeIEVknd1wmyyOyc7kG24SnpIcBhAXO9hwz98nhR6soWkxZNPcOxNe88CXeY/pkS0wJ6IkUtzoGEJZCdS1iA==","shasum":"4e8cf083a91562e7d7219708116946fdd9309833","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.02ac1e6b.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKosCRA9TVsSAnZWagAAQ4EQAJTo6PbKYT6HzHY/RNVz\nm9p9ZpxtxB39iTNYawYEKnsxUDBr7t4hAr6lEaO2CyIqou2DCd+c2/pzeX4K\n3YybHBZvoGXp/eMLhixseZ0lvHsyr2KTvVPSQMSLshZfRrifE+0Ce1bGS3YB\nv1IEXd/NHHh/bbAj0uZO+MMdihYlbloJaB4/VMnPFyFcnNfTgy+ZpSEHVjkk\nsJRZirZ9twRiZY8Bpzp2jZJbHlpfhZSQGlCHUE6Zqvw9h+5yPUXbuHUKeGcj\nXodPAqsc2xjy0mVV9KItI0gZyf1N0sSCo0hQfeD1FHhwBBqyYthXNUgfMpI7\nVosWzHlhYacfJugCk17rCISKo3Ez1Z4OrdZD2OJ+M3vOPeJbyj4bMRp9DAE1\nzeddYgPzuY2G1GK7lvZh4FcfwVK8lXSFIntBufCy7O6AaqBxT3qr3hgXBy9x\nwEktGvI/+LZlap1Q3ddr9AZ1Uocg/lkhJ2DHSZpSo3ElrDQXu1n8xRvXSmDa\nDCU/NJpdek0G8QJOq4oxlpFbwzu9MyHJBNoFHyaHc7b/jwX0tDzJvUQHqoOn\nLV4MNv7JqPKnyhVYWS+MLmpetcL3t3bkGa+ULUz/EV/mV5FC+keqB7V8pvX4\nnKhpqRo143p9uzrb1R6YyKFk54qAVQSQWuVoXr7W857Cq1vEgr7P5Kl2Tswq\n3pFP\r\n=ggwX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkJ13uI+W45KZ6ubc7Y4FiiamSBDHOmCRgQq935zKVXAIgIyx2FO6a2H9nh5wl7BHzTJtZagnnvO6wUvzijUPmVpQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.02ac1e6b.0_1617734188368_0.9219172992170637"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.5ac5856e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/fab":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-icon":"0.21.0-canary.5ac5856e.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+65wqdAqTkqPZLfkvXfipxPSUO+Kqp5137RvDuL4p/3BMvCIY9OcABfJDvb6qrsjtKMdIq+xpBICzwQNuhttZw==","shasum":"677022697466915af84c2f8ee48aaf3a68f3b87b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.5ac5856e.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuxCRA9TVsSAnZWagAAwyMP/RNTdvWC30pe1mSw1y3c\n57VE1G8zvQshHxtcjOxng8a0Cu3ODQaGx3jSaR9I5ps9dgWofRDXP0aAGGvR\nZzi1qjzQ0J4rfuGlvvi2kjY1fjbpRU9yzBkAaUc9Icg35Q8q+navEu0es/Uj\nXResRT7m90xTWKMSmOfYgrc72NHmBInslXt5sa7AiGeAbKkt7jY/eNDD2/d7\nFiod43FpM9nzNcPDIBXKwRDqr/IDA35M9GRoAJEs8uYOu5K/lBp0q/OrcjFl\nk24G+p/GgxcFGRvfyr3I5HfhCtrlxT4Tw0WTeZWmustAIPkD5pbZhO2zjgzQ\ndfe7u9w2yumCp83UlrlR5NSSyzrQVpU/zD3JveqJ+mubloV7zmEHb92/4Keo\nzwBrRFp/lPYEc4k/iE6DY8bBAnF8e/Aju1IT87cXcaUfcPhHUPbVkOts/qFT\nwq2tbmmCCUXPpzv/Yy2e0NazN18rC7Ctf4EApTXmLEr1N9Disj8eFxflyv99\nQi0AuwLFufZRiYpv4vaPM8ZoDvn57ytMfDm3dj5ivzD2BhRQB5QSWJaMK+2Y\nVNv9Dl04HyaEcH94Ts/QILLLp7s2UV0sguOCJHRXTEXjT2VLStgdjaq9v+cd\nkZrSL0nySRHjwzsb5K+I+WYbXKbpWYbbN/knbljoGApYhMDwSPK6sf4fP5Nn\n1gYU\r\n=keXB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF08w06NjOqPIB1hE4hV+HEv6+sR1bR0Vk2DfRe1moYgAiEAjT/sdAR/oThled9ah1H0fLZnV2s23dkd7XwF72YW7xo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.5ac5856e.0_1617734577375_0.3573114792451004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.bb23dbc4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/fab":"=11.0.0-canary.15604bd0d.0","@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-icon":"0.21.0-canary.bb23dbc4.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-n7SXoLY+L6x+1AtFgRFvbaVeLYX9WqjM7+NuYbEBbbD7WbrzHD9cwO2o8G/YX9cxwjB7HPOEukpKng8k4x70Yw==","shasum":"c60bb5c7b16815a1b7cb647645e1dada58a0b719","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.bb23dbc4.0.tgz","fileCount":16,"unpackedSize":75067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLwCRA9TVsSAnZWagAAAhwP/RIXaObofiEcMBmxPIdH\nMm7B5U1ysLSIHAQu2hqq1AwrgsOLQYc1j2MRB/qnJlq1oTlBL74eACfi2khs\nqfKscYSmz72Xj+Ci/WCdr0x4vwENNdhfPJOacBpdXYNmD1GSvjwUzZIbGHlL\niuYNYoGGw4ikAB9AhnW7zVULP3qMQVFmj9X22QyeSufRTqFPdWo+P9iWDoSP\naxE34jiIfGM/8kr+ld0hJYgppcTm5NWxPLDV+ve0XAc041LqH3kUCO71GnU4\nsD2vrjfTVzOGcO9hzjkOuL/su4tYlONxzcFg8p6uxT8xaXy8456+Yw9ilEYN\nLTNUNg5IlHPe9tUppj6ojUNLU76w2hGTJTW4Z51hfRYzAe6fAjGu/RtXlvXE\nM6vFMmZ6wl4nYVCy7ukcYQCLuEm52zLdTbDq6t4dUTwLOnreM/H3jorn1Slt\ntQdGoFNZmiYKpLc4zpzuKGBuVjwtcjUCaqoT81DyNGSYdTRDCZIwuoVXwep4\nz9vqBJf1Se5FOExxG3xnwjk6wfxG152g44r88MtryR4L5J5Ea6Jyb4dTayEs\nGg8oMwSyDWHs9Wfj5rfuTCm0z1WYUutv9Ag6droZNbM195Yy7f5Wg93Nrr/3\n/5EMaaT4y1WYlNYZsKTuaNDNpbutBZ6n/rDT0au9eUk+8h3oTtcG72wbkoev\nxxCR\r\n=LUD4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDziN6zRhxTexXTfY7m5qi2pYGXb4FfgJNz25aPxo0dQgIhAOFzOkrF67v/HVNu6d33SCtYMbOukQIzuKbFMM31lqJH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.bb23dbc4.0_1617830639945_0.8567934940039945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.e539904c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.c91e8d141.0","@material/elevation":"=11.0.0-canary.c91e8d141.0","@material/fab":"=11.0.0-canary.c91e8d141.0","@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-icon":"0.21.0-canary.e539904c.0","@material/ripple":"=11.0.0-canary.c91e8d141.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-qE3D7OMFt+IbQrTMqLoCRmb/dnUmSGe6U3tZp4EJsd33GIJiGTt4IEAFJVnPi7PgJR/jHzBN2QtNK+x2Hz72yw==","shasum":"1c7a493df5300c1aeb16fc98e2382cba84a11096","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.e539904c.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UgCRA9TVsSAnZWagAAd1wP+wZYxESAYlWid/Q0joCO\nUVoBefU9PApm0ijuNUkHVWckBq+W6c/C8fSojXxUpGviQ3uk7dYQl3Lx6qUl\n3S7WLrt7icizRvfaxePl7rH2WrmmV7evm49kN9JRG49BB6mnM4HsacnlfpGo\ncQwehjQ4oNBJ9F7p/nmZmnpUmYzjw4rvqKA/cprC/XgFgzZ9Kt9beqAgbU4p\ne9ov+ByWf9zY8geNliLfNQHacPmYuN6qCAGyyHA57gwxfakwjty5UyFxKCI5\n4Qvp2FV8rBh28ufkv5BmwBvyCwaV8Vc2VoFSwb7jFfbOR4wjWLARrPX51+dS\nloeylRoIwtVfF8l1ss28KhGQxIYPqDUWtflmTK+T+h2TF31pHUjgC9Sxl4I/\nsoRPqM+k2z7bOzRyXgcMtObMI35BBMDb75klkCQbMJlDKZhwTlJzF76R+7Sz\npivFUk849vFsUbOXg8SH0p2i7LgSmWV3QvEAq9cMmbeSeF6UilIL4S86zX7J\nVFroC6NLbl9bPvS+u85fOt1j9/TsQ/fj7mbNdxtzAApTZ+hV/ijy+2tZXe14\nkVuDTOJyu9M6rf2ee3szm7VCbuK64eIdZzaYDp0HocZmT8NWLJHAvguJrO3q\nMveN5uw0LlgecXVbay+K24p3jKdqrJjqFMbto/3KPNxdF5HEFKVp63MoikqN\nkuhT\r\n=2MEk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5RMAxSn3deVqbwSa8DgT483EPDD4I8Sp2gfE9Vean3QIgcfJnUoGWztbcewxlIrO1bj4rLwa6GaHCr1D9pWtmZks="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.e539904c.0_1617904928173_0.7065717383936663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.a93ae333.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/fab":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-icon":"0.21.0-canary.a93ae333.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DeuaeeD0ThEn+CR20G376EhiaT4cAvFNm9rFbaqnS7dG4+otOGjgwvB6NhnkauDn4dgtSdL0aAkK0Bql4EgYaQ==","shasum":"7ed1c08eb8c415f8420c049b6af882a236abbf33","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.a93ae333.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLT+CRA9TVsSAnZWagAASb8P/0PXA36FGL6gcjvPFixR\nc5B86fRE+Y3/ui+YfqUlVDLZcmtFXL4HI+i+AZdbxV41zxnKJOTYRPSplC6C\nB0s9UXbbNzPrpsFk2V+kJ3/bBOVlvUX/T45+arOYIfFQ2k08enxudM57VG5d\nC5OZk/Vd87qTJlerWl6Rt+q0KEZF4flczRijEKLYRMj6yLqFWtMbSE8uw8uT\nMu4GxxvgQE2eDvaNhrxRNrK/ZfnxsOtohBK77yKQpek+mnMFcR7D0UKmM/ux\n6QCt5XwcBaR5fn9eYh3NBuMAhYavjc7D+cwavACCq8pSFHNF3yFdvOMEu7Ty\nueCJiQMBAyd7lRsDRfjW27nNxTgP7Us8NoIB9JdSyusGn26dLb4MfiXTdE0m\np0DjMuWNJgNGgL4Hh2/E+m8Dxb/jC4babhsrCvfLyyn9QFZ/1A8VxlwlvZgn\n/+bd4WOLIcKtd6cqZjLApbSoNHOi3qgczmuXyIoiSaDLNvFGK075NlHdpAoW\nYgvGd6zgRaluhuCe+6QKQd2j10mh3SwqYxVeu/dJoqKlb+EHUeDM12A3ytlo\nFiFNHBeFsi6/8avab/vICAm0fLQ+IKJMSZQ9iVGnxo0Gm58tO7MewD8ZYXFV\noF5ZULqclyGUj+usCB7cP1eDaN6l3cfmq3lq8cEpbcZ/3FrZDUBq9lyVT3RA\npjv+\r\n=+LjK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+VzhpWhzogm3OBk/X5Yqj64BtfWxr3hQTMquvweAgYwIhAOo7d2XSHpd5m3Atl1STQJgQU6wAnJPi7wbPzPRNCBSs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.a93ae333.0_1617999098797_0.7903387957365327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.e142c144.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/fab":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-icon":"0.21.0-canary.e142c144.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VF5fJg+Ii+5vsDbTu0FjI1RYs3HMUZiN5Mihgm1DX96dXTP0a4HGFvSQ4MrsOhReaN3213MvHoTE4owtixhYvQ==","shasum":"0f801eafe5aaec77ff69d5837ac6d5c7a2a23805","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.e142c144.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5ECRA9TVsSAnZWagAAgQ8P/jVYL8TEJYCGJ+B68Pjt\n8ROH8sPFLsYHWMjRIUCPM9IUgvJ6B2QaWF6faY/BXb9eOHgZwDFvhLd/hbyp\nKJgCszDghdoxujSo47JCCf139jFGsGphTo+ZA2hULRyLfyHjjonkLWOj2G1l\nLKm8ItuA7WiJNJBt9mJQZ7DIeHSrpw6qBcq9E0iYonORMngs4Ga+/rhmVEAn\nZgV+EajSUTSkebfRt0vCkJ3S0LfpXS4eyLeSX+XHadT7JFmnqbD/ltskJGny\nLaMHAp5Jh29rJE7wcu95w1tWWE6NqklxarfREvb7lqTbj2tGVprBz9u3pfcb\nZAPTYZLLqn71yQusBH2dbPvHGjV3OWsJUKAKoFXYFoaYuDsz1LSnzjwx5Y9g\n+dps8PkA+hvKFl6fo5U+FdfieL14bsNAJdUaVwYAL/IjU2OKC+xZHh6PwIAC\nAiYJMgdsL/OblIgGOMCDGaQNJpDI2uVz5IhzGF9oWwZYSqFcKfwxANLrrBem\n3S5cLIV/oVO5hckkrunuSQjmFwWwdVdokz+ljfcLwbi3/vQWy+Pcgq2A2TN/\nY65g/zbqeibBzi5Jj82zzPSeVNBi+5hjA1FXz+V/DqTB4/BbEweA/2+PcWr2\n6ACSJRmWxBwrooiYIwi9vRPCRrzQ9Uw6vTTjGsNmAAm8ve9IS4/1wNXfKije\nvMpH\r\n=0A3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAVhCxBnk0fc9nr7h0Z8nuhFJBVVz4bkhOjc55RNrrsvAiEAzl7gt7qWy5YNUZKE/6zSiQKyyLc1dcelDfd6XTZK03Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.e142c144.0_1618239043663_0.6839944174977084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.382d7eb0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/fab":"=11.0.0-canary.b2fa996a1.0","@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-icon":"0.21.0-canary.382d7eb0.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-qTJC/gGNrh6f3v7ymC6/INTkjI+8kOQquukz02S7eMRYRD0TKjlJ2ybqk179WqXnDl8xHtjXwPlT8zrzLHVHxA==","shasum":"0c6cccdb535215a1eddb37404184223f79bac079","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.382d7eb0.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQwCRA9TVsSAnZWagAATPcP/2YpWYPNnseLAoHbpsbP\n/ChU41Of4YncXkXJAqDVC8KOUxTB54ZfNi+u6hmD3xWk015CmGtxXqs1u4Qc\n3k597iXJWW3FT2pAZJOr3V82rpJLekwBbW8CMc4zJ501so8sx9eEQOxRggwY\nhiuDzenf75O+W/eRY4LF0UYpvCAEejEwlNhC4gEmikYHQtz8yFlmLpJ90/c7\neC6oXhThIvDtS6yHV4vAyVUXXGRR+knA0tHgJoWMokv0+Ot+yDCtaNBRd4gf\nqTZKYUafK7svlE3kUiCLdxcij+T/iFkKw1ObjnlYRUnLklCPD0TgiyVnYl4R\nwA04L6XCeKS+LMjUWTQ7S8vdipJNAX3lzALkWNmnoL0ZFhL3MbSmFoJHQ58B\nR9hLsmx+ufwVQBhChhu9uvzJ7b+pcpXoIcE7nkxBkBEl5Yv8CIOre/H6Yy+5\nI2H9ZPFKKbhzUwnMaBU50pam6xTRq8VQfmCRkd1yhmhPjQKONYOhj0H7CgPM\nO/w7TBNBNEqwlc4f6SCMk4C++zn221USh0SSQ4J71xW2PkMMRvClqb1vfxrl\nPIL/zP5GIQMbEZwp1yFopKQYdO90CBFnbDY7u0yOAgFeW6znOEv8CmS2jBg3\npui1EvXC2iNDCNJrPZT4Oj9zrJudihi5n+tdiPjxJU7DTG5cxkbOCUAD28Wo\nFXHY\r\n=j5fj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlAoZ3MbAslM3MM0ZnNsdkzQn/+W7huiBo/UuvF95hzgIgVLuhDfrcSzIWevYKiBngMA8euNAZG7SSey3ufh7BhPY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.382d7eb0.0_1618265135867_0.9574071472351031"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.b16c7885.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/fab":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-icon":"0.21.0-canary.b16c7885.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BK1Xm33QKP7uLVU9Kdq9YU8dUZlYcfv1VHx8oDzxbr2bSDLZvxYS0kCjZpwIsxtniNaBKE6M/SIcnmTgGkLnLg==","shasum":"abbe927d82621946fc7db2324bfc29360d6605b3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.b16c7885.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwVCRA9TVsSAnZWagAAEeUP/3O4Fq8YEhcMHRufJz2K\nXAt0MBBWoItaCX3gtk0skXnam5hfwHR+pXRKWpR+GDjsJwuCdBC1V6IGrhcq\nRKy5dUpJAVJmu8wLZyqkuLrU+8f3ofBDHbVofrtARarMANhwQEYShaolJSoG\nuG8eLhb7lmZICwV32Ep04LhglZyu9v02/tMw3788L8zNcKHvUAajsY18oq5M\nPN3crNAlpzrB6OI2ypmrwJTmybIzjH/EniKOuO5dAD6sB4fvN/af3ENGhMNL\nOgpE1jqgUMs0WiEwAinj+cms2Cy2g2nF6HPmh5VyABb6OnoVYjcy7OmUUx5j\n5Tw1JK8kW2FItnJhqB68TCGDXsy90wb848KIk6oIcw/57xMN4hvKBk8GJw2+\nc1lXYidU2SZrW+EpyYzb7en6yhNvjBkFTDSrDwi6hQHg7JPx7U2yB4NBDVp7\nfrYXMOLGVklqofmRwqEwSjB6AO7C15fZAFcNWgZ101SyKKWVdT94B4110Wlm\ny8Silbr1IeEzF2Wk2JQbsrAyIOOY64cJRzdHhfvtZFOlvveBwTAQI3faIyQV\nBc4C7iefX/MYCSRnVjPP5TeX5R0FGI9Q6ZjHiF/4LrdAvma5qnuaQhn5kbnF\naXr+kkLYfbBPGoVuztY9g1ddSoYBWu54OTsXCFH/TziLKFBCunccVoJgfLWt\n0Eag\r\n=/URV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6tOZWIUYCTyt7NVxnV5zfT8ndAV7g9q0UGbq0N19AvQIgOudaFV/LM2Q/DUg2PpnVPQ4hSZkIuvfcT/hxNcY25Vw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.b16c7885.0_1618267157169_0.43831860080599916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.0e92782b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/fab":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-icon":"0.21.0-canary.0e92782b.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-NUiV3iwIW8A3LBi8MIAWEU0ddHX3eW9q0Qhtfxd0Lvwp77ADANMQcp9lSDE+ljzo+/K2sGt1NjiHS1Ggr0++uw==","shasum":"0f4b0b5d187a2204c4dd4a8fb461847148c22c97","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.0e92782b.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda23CRA9TVsSAnZWagAApIwP+waUWDHVcGMjHNThcrJo\nVEJrdufQbdfxuopxFdBRWZmBIDhwjUcm43B3ulBk4BBthlpE+OIp2XEZ2wch\nzY/UtHsBZM53tdwMc7GBenkk/qY960K0L2TbFvAuWtlwxIPv7PH7Hik0Edtq\n+2o3PV/ZBr+m5drofgz/09bcmoaEctjT5nf6c2gcV4/EMROLkv4Jm6gp0JH7\ncok1V4caEHfJDldvOuwKvLGsdJzyHZzsdwuMCwTCHUlAJIWon2EoFMYLun72\ncr+10nqj1fS5WoVUu6ObRzZgbrcRySUcpcRqz3fEoXcvwgRDy5rfZL7rX3mX\nQpgYUGLVcFmPTq4+ftJIoOCsD96FBaCRF0yMoTLzRX3YiOl8X5gmAjCKnY4H\nFkADVwQMGIqPpEmGBln+c4wge5/Vglz4EOBhDPE4/k6IIssZOG+4FtQvYBqr\n3beoZdAm/5XY+RSvi+ieoERXdz+VVkERXIpGMZzrNxUDFcnxtBeUdjiNP4SQ\nm4AmKVS5amEbhl6dECN//msgPHQ5JHqVw6ykNkuWPboqTd5YVOHHkjiM0WQm\nmebWNB9vo1oeHSudGkHUjSwRR2qtlwhvbMOumtCqCi16sNDl4xL+XJUULHEL\nVAQk4fxNgDzn/n/7ipdzb0rAcM9AO09gFM20aeI9xNqX+9sRf6nRD+E6AnX4\nLBKa\r\n=mlVV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgMH1CrP68S3echQt9Wlyr2sqJxoTW2jP4qt5/DfUS/AIhAOn6j5hyO/8q6yj0QmuRn2RZ6c/iTkGKZ1dnqbXskjzc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.0e92782b.0_1618324919159_0.5723269270581486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.70b3a072.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/fab":"=11.0.0-canary.352b295c1.0","@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-icon":"0.21.0-canary.70b3a072.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CQrQUJCp0txTOjyNBWbWLaUcP2J+iMXkID93JUWfk4nnxGC34hHfy+cm92QrYV0TcWtJCj4SaO6a++kfGuNxEg==","shasum":"71c623290b87a12a5ca6e3a4cc36617a41c86051","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.70b3a072.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wQCRA9TVsSAnZWagAA+18P/A/sQNCxtrrNAF2RDdk4\nVYtXcTTiCSkKun9LmtywbWnGZF0XbZoZDRpJIFurrnWtnrTAjbFrP0wTIQoW\n/AQ/mw16YlQSx9cYDNZz1TrHsbaWTtjHOOEINFSw43DhIhWT1qYDbxEnkrxd\nQgl8eWSIcggegQM5dPRsi56/yCT+NVXWOjpSWsKyRsTjy5e3dalAge+AWV5g\nAsu+mSoKudrWb2NRe2eY/aAuyK0kQ+LN9l3tf3KJm41FgXLonUzl9UUTJa0s\nipv3PJetkgVbghyu98BUgvvc6zU36kRPM90/Yie5eHpeQkJ8cxs9qiMcxanC\nmw2iMmAoZf8oKnXVqMxkIqjRfkUUUtWPCMhTJvnz94iBlCFY0fu6uzHEIrwG\nibT4uwL4rAT3enluG/WRpxKERqbIDwzW/kNC4qCdeYwdK1AwuFcjdZmtBXHI\nLBEF/q6lG+jNDkV3TtjHKHUCpUWaPexFw5i+34WBMdwo6RUkSTNkMb8e2hnq\nCZQqXwIW55XpSYSU6E/4w0Wvnl7qYGopMG3O4XMuX9L5+5wRumv0bC2JVLwB\nlCuStAVoQoAdDGSquUSedARCMaR7aRtpip+IDQ5fxDH5+jw6Bnj9CHF7YoEr\nqRZNABeTst06aDu0PvxPm+2G092M/Entv/A5tLADYKnJowQhcb6yG18sSEjr\n+I/1\r\n=KcBC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIECwn02Fjfc3JnkAkLB5FbtLZ1S/xNq3zkBk7zJc7cCqAiAXqQqjO4tYyvHrFjwOA3U5PpYyQrr1edfseO1KqCwL8g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.70b3a072.0_1618439183864_0.7823865295923425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.ff79b092.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.3793a3143.0","@material/elevation":"=11.0.0-canary.3793a3143.0","@material/fab":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-icon":"0.21.0-canary.ff79b092.0","@material/ripple":"=11.0.0-canary.3793a3143.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Am/mHV5Vw34mp1nAiY26jnTWFrm/r9mRgc81R4uisRirAmPenDpLi7jKoPSyWCIp4Cirh38VnuakFoV7bnnJhQ==","shasum":"5fe2923c7df448ed1625dcec6e150ab50295af4a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.ff79b092.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0zCRA9TVsSAnZWagAAR/QP/R1pC0GBUL2ghIKJ3nJp\nKG3qVudx6dhD+P/OzirhEIniNn13/ceH4lYKNxyPZ3RfKB+/TA8X4F0BILBx\nXAKIUQ89ntmaPOV3k1nPbSOAUeV3S8FGYSkdL6OSPhNVr6ZBhnMAvPdIKLkQ\nMIHfikvtyWH2+YoJ/0UFu9actLyRizOQC5VDICKwSCIf5ayqEbfWy0co4abv\nqHKsNWRJ/XVyryySPLIxZnbZe+SYos9/s8FqB9iZsMJP4712xmGhUBKqlklB\nHQrPjM1srf2wGBzKmv2xdPIxaOHoPZiaP1ij5thsyMwt8DSWm2zAsarFIF+H\n2JLtTUah5zvko3GpKdkkY+0tZyDvt6T5gKWAGz5JwqNVHIoeHwOgW0XN7il8\nQmSTSWi4PXZ3bsas/cZBdC3nAJCTKPknVbd3sl8lXjGj81cUk6rCeYz79Vjp\n3spr5X5T9svXthTp3lpoCiDw5J5cogxKmuAPbhGm5/43TX5nFGga0ewImVRl\nnyWS/UPjqY/cM21hkiNwHRKOVCvsDIsBTwosaRDjQgCGHD6qai/m5FzE5A3z\nfd8KFEnYF6gfvlOnt0AxGIob8FpMLak4j1Bs08PlvFahemUrtHZhHbPnNg/s\nTod3d3Ewd2QOeRziEBqtBf/xvXDU1YwY4pRVJvHhVKeABZYgn/91gX3DnhnH\ne4Rb\r\n=L2tv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC/9pruTf7bLOFwXPz6jK0pWEevEXwxpwLejpPYfuhFgIgMnGH0YHrHVE7q5p/UBw1XlJTMgecuAkOAS3ffMFirUw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.ff79b092.0_1618513202942_0.02916932748458878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.f35b2fd7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=11.0.0-canary.3793a3143.0","@material/elevation":"=11.0.0-canary.3793a3143.0","@material/fab":"=11.0.0-canary.3793a3143.0","@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-icon":"0.21.0-canary.f35b2fd7.0","@material/ripple":"=11.0.0-canary.3793a3143.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zTdya9upYExeuUxnQ238val6SzABZ46Mkd/XXQ5Ox70o63CNAMWEBhcLCxzOl2DM50gKauriiihfRrrkSZtmuw==","shasum":"0e6ed4b7282ff30d82bcfbc7b10caa98976fd595","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.f35b2fd7.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+kCRA9TVsSAnZWagAAyx4QAKIWfFJ/7kUeR94zQrWy\nbXqdku3NIcUihj+Th42MlSIcSGdaxg66bGB6S72pWiFAOJam9OC/YkUaU/hM\nRy35x9iqqSClrIb29OqnA5ISVt9heIuC/ARMez487RtPxWebnK3Nt6PNh2lG\n36Ts/eAV0OHXjAWdAXaMQWq6/3so7vRSRtOxYBvZstndkosvTxTWPC0SfVXZ\nuclMeCd9nJwKUN5ME8+wVqLfz3TG422keR/yMpkvxDhOK2EJh9gZFRRJh/th\noCMoLF9mlx4cecElhVROqtOnR1eZC219+G0sVBJY4mz7RgLbpzjtaKYcrOnU\nSRVcUJgmlQAFJ7pjZ9dWkjyHoaf081zr2liDS0tXgLK6jsqQOZlSFCIj4iBk\n5c30BOuLBD6gZPsZoJfLH9ofRUdz5hka4QSesAFbK3/99Mt6mDFAnrHoTO5+\nFMxKp3DCHvtakRBiyovugdIAFyhjOz3zHJvVREXG8z9B6LANwvDh1UJENBT5\nlAfML1+C5Voj1QleWO0WIk5g1rgvNm+CnowoqAG91UxnDzSlKDr4h9J4h+he\nr/8t30uKg5f7b+9p+WzmUMH/EfryXI5FWsy1aha/4xUgS6yVdf69AX+m5fMX\niBRaztqPW4o+q1q3sE0BWC4QpFUiFNefEPeW3ol90PLvOTtbinzFWRkBQyeK\n7cSB\r\n=Pcwk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+6PcC+r09+s4WanBwB57GY3IZrpyl8MKeGmxQfiR4qAiArJEEMrSDZpkDqx1WDi9HyXrQIUO0otgCqKtUUCh6Lpg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.f35b2fd7.0_1618513828129_0.575836681068844"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.11977cac.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.3f342c3f4.0","@material/elevation":"=12.0.0-canary.3f342c3f4.0","@material/fab":"=12.0.0-canary.3f342c3f4.0","@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-icon":"0.21.0-canary.11977cac.0","@material/ripple":"=12.0.0-canary.3f342c3f4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-f1hhOs16nhKPmSJWBpK3RQGT/cZs16CYJhuBXTAw090a1CHoMcN4K80odTmatI1HtimNYtpE68hSIAn7mob16w==","shasum":"a5a1292dceebaa9fea61cbb895b0492a168f7545","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.11977cac.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEhCRA9TVsSAnZWagAAm7wP/1Z4mYNrFgm4Fcxo1IHj\ngz4zBHLdWt1unwGYhUAFtEmq/JCpIZzaNq47EVbzBcvCRimLYpT7w5mnCYbA\nA+WT6oyHQXTbgm0QBRvyk4istgwb1rgBZ9l851uJDVxi/QaymT6Ca8tVhDZ2\ngjpSYfcmpc3IMuqWRv/Ka1OF3sq4r7awXgqBEQW8c5w6sMeW6tUU9zgk9NfN\n9U8lnyB8cKSqy3aeI0OxYYjS1mtJMhJFsSEiI+owTqW6eBDblABMZxlOC1Ln\nUjyr61ksZaN/hkdARJaDTPX8X1WpNVFWjlpw61pJWAk55qKCqMFcmOxY6RpI\nIcI49Br5wvKvMxvP3FqnNxk+y/Zcay6x2RrLjaTaJMvU8ynDnFRsUp76lq19\n6b7Y3P1KBsX7Pd4JjBw3D5oWMa+KsljdV9OLA1tr+HDO54lXFlr/RLUcWIq1\nqHh4YLoVcw9UqTNZZ3ZNRLvydp2woBl2sxAAJVJBIeyhpCjxNHZj81im5KYM\n1YxUcamHSwvPE/DKmzD6uxc8PILt9RicLZMIJk7sjBPfLLo0st8XsWJgUudc\nQ0VJLwyh8d5N+QGBwKhaMZoi82/1ZoHsflMYXY0v5l7TMuJsRzfjiHYb49BT\n11zkPBArMyWdWhl54Ik4vPPcLuZwfBf5f+GAAY+WJmGKbCrhBnGQB3CH5kKY\nsVVO\r\n=vylF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy4idCvugRUTleuUa0GrBcplCbpzwAeVXY4gBxSosCFAIgdAzbBJX/RuBWEJRygS3y07MAxeD/pGzb/fkrgIvxKkQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.11977cac.0_1618534689278_0.22423861180921145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.018ff45e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.cad489689.0","@material/elevation":"=12.0.0-canary.cad489689.0","@material/fab":"=12.0.0-canary.cad489689.0","@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-icon":"0.21.0-canary.018ff45e.0","@material/ripple":"=12.0.0-canary.cad489689.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PnZpNN2HDgLd6r/eWdh5NoPIuUzQZlsx9NZFQlKoP5HOrmy0cQFLe4r/IYUk+/WgtTp5UFwMScMiLfXgYRXVLA==","shasum":"ff1b5a97bb5cc9e5a49612c889f867331baec53d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.018ff45e.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3aCRA9TVsSAnZWagAA7Y8P/2Z7y27QLph486mRyFXg\npveHw3O4tOXi76i8ceVgGujjX5XPIGUuTRxJzSjwF0mihhT/jojHKYSMpTig\nfgV5xPv+31k33t8U4i6GRAig67mAI8oydXaKtsC+3HJn0/rFucQC5F+6Ix46\n32enNQ8CtToc1+wMLGhEtth7BrXggyjHn64vEkFjjKla8XCiX7+8NbQvGjlR\n6GeUqKdJygzOEtDeZG3KiK1UFtZ3gA/Rq3K4A80hZU+92csE6dpt/1DQqLOT\n3vbD/v0Bf8wQ3ozY7916cllVDAiBJsvXnZW0/Rp9ny62VQNHzaqKTB/LNPjo\nz+N+VE3SaTwmYxycJ3LkcjA1r7AF+i9bpURlwK3vkGexoORPQYarlImmundb\njDBtKctQtSAqAdn8h7CA5sZYWV46ZCgoZtCgU+pYTuP2GKXpetWVzYJxpnMx\n8471eQPempmjDzD+84JlEoFPFZsg0qSFuRelCc5RShlWxVJZs6WdYgbUeUfp\noO4wt/PiPUJbvAy1KycDPyi3+VP/jUWoVjnGjcDLYOPWjoSPr/1aD64yqv0C\n7pHlvGvS5hcELl8XzwVoaCCIhO82z0209XvR3bfIOa7gCuBZe3RIEvye6gg8\ncvJ++g5K4YcIMMKaRsreviSN9LZnDBcCJnf4ZQdnu5Tn6K/b0MUssPMd97+r\nDQ++\r\n=Aame\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBr53HSZwQvlAcQJ0oY1HQJQMiKietI12m2NM/2u6UTHAiEA3msRxbvqhf5pqY0ei62lo/sdYO8tWwsLlLJbBGPmP38="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.018ff45e.0_1619131866070_0.7636487014910596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.c99d1fa5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/fab":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-icon":"0.21.0-canary.c99d1fa5.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-11Rb0X5wLWMUE63fVsaP4VqmP+AXQry2ZlvmqUtLGujouSSo4rjpkNyIXRDHQBLeCn4nzd29AHwaF4gF/wMO5g==","shasum":"0b99fd110b7b8b45e9b36c722a0545c18f9f7789","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.c99d1fa5.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiiCRA9TVsSAnZWagAAhl8QAJey9xfMPaSWYUoM2LCK\n1QuESwK4n8/ZK1Kmez7YaTTvZrg88224pN6m2G6bEkVPd9IsRh+4ANDhZLci\nsu0QWEh0U/ojalY3AfrYfYh19dZHj3/tHJcQvBFDey6x9plfteoXSFC4KPhD\nCKdaSVMYRF1C9D4jzw3VBMHc1uDoQpLoHPpxV1JluMCydWt5OljIG2W9gJ23\n5RrdJISWTif6kpUJEURXV0I6POlnJAj8IH5JlR0hrn20LYANozZv/mVdMuCA\n4I7e2YSNIvcL7wG/suwo/KS0OK+xmlSY8k++ySdSt4J8jOEfQvf3+FU/XYg+\n/h/AmH8veSywnfdaHQTfyYgYGaBbtzoByWLWyUEL6A0piJpdBnJuVFz0BsjI\n9ZgvwoKgQjffbwsjMbnPwaCDkH3tpgczBVdSt+qpqT047wbHmzaH9dStuuT6\nj2SYEOnBpn8CFen0NFJUDknM1zbNNxn32eSJArX/UwrjxcWutls9h5b2PyUT\nubE5Y2KTxrC8lBd+Ruh5+BQqpshKZY9O3ERT2Ks8hYKlmtO1SK8ilX4lh9Ym\ngFbgDUst889oPOROXGiDNFTpqvhSDdnf0+6jI69Ogwv1NO5gdJrQIDG+WAZ5\nGsuaEl1F37BjOa/mhhpZVcYg2d8uZ9CzV+EvWT27wbstUjK8E+HpBPUzmjVR\njjvH\r\n=0eSQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsMidfLLB3QVynwinJhdGWN5ajuZ2IvSZLV0BpTGSmzwIhAPBVwmxPcjI8DbhwOZllxYTs07pnyS6AJ2WuX6LOTXNe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.c99d1fa5.0_1619466402164_0.0005298795712040949"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.eea9b304.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/fab":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-icon":"0.21.0-canary.eea9b304.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rWiTD0QKmnpNPfuHQiOi9hWEWXF3LGenmqeAGYMbrEbYh8pk/QTiMQpnJOUs/VO9LJ8ayCrC+Lt3TP4iPTtRWQ==","shasum":"4dd313417cadf23cf5ce2aaf2f157cf98e31d3eb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.eea9b304.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXbCRA9TVsSAnZWagAAH8oP/RqtLxnFKI+jfvVLoJ8I\nMIx+YQzlWhQcIX4Hd63NZZMvpELb/UAjczHcfDojug1zDcMJe/E4LrHzsmbU\ny6gIrv+dsQTQ7UpL7UNeOJv0A+b3Tr+JbM61PeO+ILqDJYeUoTdxzvRX0j6f\nkhDcVpJX1KRiFeXXp9Sv/w39ZbD1nJukX2mMQbjyLmYyOoJLV0jcZRUP0I7a\nKpoI85aywjJcQkt3Qe8bIzfhBpwK2F1Ozgll4EYbY93VIU07cs89Vrz0YpR1\nYXPg0yTwE/ADNbMJxbU2WYxECPHWCTxoKljEV4m1Yk8ak5hrKvEGruDEuOK8\ney0mtEsADRko/Mcn0FAJv2l4/AuixhsZi+fosc0KFKwO41R0f1KNoEWoSVDU\n21TYhyiPEipbUZsJAjKhuXf8+9IuVs7mVby0nK4/qJaPSEIx5Img9QzVsmKR\nOlCAMY+dGJ8a4GvB2ArgvAXym966DKA69qC9fqvHg8TdeDgjowNQASWiOhNu\ntRla+ncPyyM5xzua/O/7wm8+Y4ZS6f8hZdPe44/nbeE5J/C/vpiYc9BbMw01\nt50GUqeTgzyJRVWjU7bc2EJ+Po9qsq2wF5Fwwn3IOEe7c0vX8hTdzG/SoyWJ\nt2Oa/HRFXoUSCHmFo3dem/hRS/7O8TedHmCMcoI+NXPFDV4qkAWnj0VsZl47\nIOqt\r\n=vKwM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtlP7MzgP79Qveb5viB9qQ1lsB+1GLlEX0Bo+X9F1aGAiEAzCYkJewUTvadKq5J8Q3kGcL8l2qPZ68YHv6n77wff9s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.eea9b304.0_1619563994651_0.3154214518963716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.5dd85d0c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/fab":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-icon":"0.21.0-canary.5dd85d0c.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nYhZAFuktcttymNj8fO48dmhRwtqrhSBfP/HyXe0V5cGxGMdmH2mAqcrzNq4BRiXXIEmZkCEeLpvchRg0zMYVA==","shasum":"6ace67391f8c59cca86ee691edacf6e85a974272","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.5dd85d0c.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKe/CRA9TVsSAnZWagAADLYQAIwtlQa8ZbdRDdhguVof\nJwcDziK56gO9WzoVdv2XSbe+aNt4X6IDlgetyjSOh/jz69IN+Ig7/x0d+myb\n2BFxxsX9qQiIWNSs1siMdeRMHCZsOQfRwVhdGROLBTifPJ7yx7RHqocPHHTP\nwzz0TQPCwT3r05VnTzCUgU9mMIuH23grTM9ljn7eD2ygNk3Vx+UwRwplDkDU\n63dJuSfHzkA+cNSF1tt+YmyNzHCeRyDbBtUycSXRVYYEu8zQg7M4RlVhHyZm\n9686OYeyiwVDhM1CM+tcjkzHJgEbdMdGDdhTTKbGmEi4uLamLgEnA0DXie2l\nXyEY9iJ6gmpsrbyw2EXPouR13I/5sHAP6ipWZGufR1H9izdKr0qwF8XWTYSq\nmWzkJmebBwNa33+rl1r00S8uVHydQsVgIngKd4bbGjAx68+x350YyOm10dIC\n9vajC2365X3oFNoT7rv/1sFdPgf+FcxX4a1AlNvlU6sHmntHjk7Zc3EfyPbo\nf/uPwl2CyBlf39YMHM05Q3kr8Vj+hLyqWNUVjcdKZgy0C7Dq3jAoByNPn6xu\nPly9rctxZqcUN4PwpE9Q/sjkNrg9T90DGYssed3XfjV9o3G8NOY2oS9+pVcf\nf5MeJGjg8Ycn0fdqL8HQiaRcJUmeN/Rn3Z2UMOehpAK1ZcVPwfzt4ziBfVUd\ngE4b\r\n=uy7n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqEbU/nIp9ZGegHCdv6hExSjUwtLPX+/ws2/QN/eo2cAiEApV8yjKJgiUpo8L2uS82s4oFOIdfFeW40bcvVjz3HDbY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.5dd85d0c.0_1619568574682_0.3650381567331531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.cc813cff.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/fab":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-icon":"0.21.0-canary.cc813cff.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-te0vKpDakOo8oZvEAsFjOeZ7rt3esqQdfceHiETBmMThnLRIZb0vTg85NERMVRG4CdjZv+FWoLEp4FTdyZZ+Hw==","shasum":"e0fd506782e78164e29bbcddbadf200aa7891f01","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.cc813cff.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRcCRA9TVsSAnZWagAAiekP/jZOzsLTQ/g0W+mQrh1I\n/B53KmWZwpAfDM0SWwludEqK3YAfIXCwJfna+Y+TMs/VxdaVQg7Ksw1misKX\n56XfMvep1Es2SXPCnualWOfJC+WUL+j6E5VT08ww9kagEeSl9CEo7ERHmVl+\n9yU0rSGMwTg42sXBSLHVgsn5jUOt4X/udrYO4850vsK8h/QtQp7s3Qx00sO7\nIXsfsufOHVmg8mKniqkWFgs+ZZ3Ms/j/PbGJbcgj79t80G27Y5c/lnq2XH7Z\nJpgWbdiTGFVTTa2DC+raYWM2Cgwqfu1YvZfHnB0oGVLlECdJUMWN2BfKIoE3\nSpKC2Di9QqDMYOBh3f0vPTymfvoofGxgr2MJG12v7a82EN3iNQh1EVkXzn+0\niKIxZp+GDyIzUK9EkL3ZlcT5GT7aBqzSQtCUBskwdE2md68GfU6x5d04XEZG\nr6qaozCUIYqvAUb1LzZEMZZDkd69Gpe5UGMKz0KihJ/A5NuO7eqBQgcyr10p\nF50OH3VU1AqWjk6bKZ/pC2W7zcM0SRxPC91ApR3K9MX5htMMJXCUyR4TGUZH\n8/ZGhTfBI5OeefqInF+ydt9k1a14MNrDC5f3UhxR5PpJfeGR3KFTnUBesIJa\nm3bI0d12Qe3gKfFip6JyCRhtmOQWFsjERNdm/oroSvSMGFHUYwEJUlp4zSzc\np7MA\r\n=jy4b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlJi5CSe4Pw8lUv90vlPoQMp/9IdVcIfgoFxTG0P/xvAiB21LEUAFwUuJAg1bU3cqO0nf/9xWL6GSwpQA+slfaMlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.21.0-canary.cc813cff.0_1619817564166_0.3854217365248698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-fab","version":"0.21.0-canary.0875e898.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/fab":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-icon":"0.21.0-canary.0875e898.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YU1fT/1Q/RjwG3Q9trTI2G52d9JQiF+p4FQ+R+9MTUPYNUlWX9KGaVlTIkfgDp9FUnA/h/5vnVfwkFWYymUzuA==","shasum":"0482907fb0641e4e5f05585363bb61b83e97dfe3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0-canary.0875e898.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZFCRA9TVsSAnZWagAA+wMP/2FoJ5ZR1WockGYrO9BE\nC60bvXno3DoNP4Wt/zuBRjPwzYBSR3gmN61EkenBnwbLLOqNX/5/uimYDBbX\nwO0d613l1eOnI6le2WNpH+4cG5VjeB954Un5Q03x4FwRleNJ4DiEhZfN9Umr\nEmATumuc3dx6p/9fG9eTREuZTCeh7zt9OncxCwtq9kvz5weTGyqchRl80ctJ\nzJHQgmsIM8nMxI3SG3uDtEvIxzuDh+qbBdkyXRkYZy7cgH1f5S+cWPj9aXFK\nZiqLUA7h9LlxKBTx6p1qTxZYszUamDRu8W3jO04O0WnHfwwungLw+erYZOrK\nBIGK7Vephpzu734T58TZb1AdOnS4vXguV3n50CM8ufG/Zs3h+2aQECwBlZap\nf9R9ihqrk6bUVLEAzFoG9WFjlye7Y56NdVFQj0EEW9AsbrVikJOGiawhGsFd\n2XxSmtncxzVBB17OCpARJeiwJnVmjq/+5hC4RYdVkJ3BKBB0lBrypdqex1NQ\nmiW0GVUOEmQyyG0cFiBa9DjQGbsWGDK4GJPwbmbUeSSWhcRjp8Ko62gFHc+E\nSXpQoU6vOpJkXCX5gkZ2/SiJ/UmRnH6Q7aUXTLo4dPfSk9eUH0iNSOKQPqnI\npK5gQ0/5n1V3UMMTW9mwgVMVtsU4k/UwEGd467vjIqDp9PRgfq+rYKkLaUHJ\nKyZK\r\n=LRBW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiyyE0ZfXxNKj7QzH6hHEI/+xhdvqhVClOktusCtbLkgIgblVGNlhIZF4GBdR/GGpZCxIcEV6JEJkPDNAvIo2GM+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-fab_0.21.0-canary.0875e898.0_1619818053266_0.10532469317182658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-fab","version":"0.21.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.21.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/fab":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"^0.21.0","@material/mwc-icon":"^0.21.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-fab@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-5g0Be0ytP7ye1Hltw7aWvO+bOw0c+3ZpyRMpLJ9DZuyxmq2fY4t7+fPGnXBMRGY6Dkia9GT/l8+NQY4h0KX/dg==","shasum":"b3b228d257597363b8f4a491e0687930d23ce56b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.21.0.tgz","fileCount":16,"unpackedSize":75038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmQCRA9TVsSAnZWagAAivQP/i4UdXazxSJGEY6GwyQn\nGyiauVJvJ+3xw0VppuhMbtH0JhsmG0XY3M/6hKQipzktMmQtc1s2PYI4441A\nmOY01zM/xMUQEkimqAycx7gWIRar00aCrb6JURD7yXAM0LGAP7eH9MDK0u5U\n/p2PAN8eggCA4i50xzH0GFrIluOr9hdq4jvTpo35u9UVExWo90jbvw2YupHU\n+oDtbV8VXvOvyXTPP3/C6wi4mV2k7XXgqmz81Md7kkFOOC5lWYfqyjJG88WJ\nblJCUEJ6ZB0ClywqWmn+pfFqan/JvWlIC0oJhPt9HZ5A2p3YFkjc59isM2cK\nde9seiIonJ6fG7Hnbho+MpzmJHjOR/6L+aNCRVgXIxE5hFjW6ZLnBAiMIweL\nBR5409406kr2/j2BBDh9PXmYsKh1ivYC04W0333vK0UjvK8ICKMujGg3Twmf\nszT+0j0IGRk8J36IP79P/OjGuPzXJXCrHqOvEiZsU8a3n890nIB8eT4TMCHe\n4qvqHnA4G4Sq+1oONaVIYTge1jO+JEcNKfTduPye5QGi6xXT3MTpC/R9TQos\nUVWD9GiX1vg2PrHIoP6YSDGyZq6JViR7tN3kO6IVtdlz8ShMPZQJhqAtM9e1\nxnqulR3HkfwktKcJ+Kx92Kn+WgxmK97tSN8uZTBiib4m2dsYkM5x/dyCRVOQ\nn4Cc\r\n=v60Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtYuTOHjmRuz/Jp7qPb86e6pZQR4BpxQfiZdUWP1UDjAiBuBmQiAuuDm0aYqg72LAOFT6Aww8Ege6j3Csn7TGn66Q=="}]},"_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-fab_0.21.0_1619827088111_0.9046363814995542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.8f1e7e1b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/fab":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-icon":"0.22.0-canary.8f1e7e1b.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QgX2x4wqHqiW+/yHjzgo7y2RdgzDgBaKOpOi5AHQeMNsdVo5UeIzyZx/Qy84rJ3+pRIxGsXxLx5CzIq+Q5OQCw==","shasum":"08fddde6a049d52e93e4aaa3e933465b2eaf56a3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtCCRA9TVsSAnZWagAACQkQAJy6BmRGf8/TaBNI0xfU\nI+8zD6qdz9lHdjakA7WwR4ZejR99ilKQ7LS2ttZA9tjV7CrTWPQvloH1qRJj\nkV8mqVORPvC0q8LzMNnJofzdP4T8k7wFkdksqKPXMs+m78XJuccHfp2FajyZ\nEEiaIbAURljVARpOEMVHUXgCghvvp8gznprlrr34Gsek9qUyKftLISNqpCOL\nYoueetd9RAawQCfhk66zmI211EJqvjQoMbYllj84CxRPg3swwGsNiVN8k9Zx\nD82+qul37rdhXcYY9Ye7qjTigTNz4xIWliLrmH0brRymw3ZpFweiHvsyxw4d\nTU+fN1HuroiYdmlTS94kAT1U6oy4GjDgKx433gm3xJf7pHKRySw4XMJ8gS/l\nXwznwB7v+aLaeyQrFphFLXvuH/G77Uig1/Mh7pHstAWYe6hsYPtyiUl4Fd2H\ncJiUUlx/KoZdGGxAmEoldcdMCQQQf813MVHUwNeWv3v9g/fCv0E2mvYgQFM/\n58jhhW3AAuT+U5PQnaAwdoRLlR4RSicOWP+SdCqxLnORB3Mqwc9GqhI/zgiU\nlfIjtiWQH6ot6+dY0B/XPPhWTUHyYssM70HuX0InDpJbL2r8nmT/NqoJkDlH\nm6t36KUSqyyo9RjgN0culcO2QC0agMi5wezNwf9e5n4PbgJv/MJjIc7Jf5Yq\nSnh8\r\n=tMPh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHEilO1KfjzlYyJX3BWAMvVxeRcZsTefHRXWsuwex47TAiEAhd29qDXXJWu/6e+sVKol9TorkT1AwZMvOjsU9vi0jac="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.8f1e7e1b.0_1619827521942_0.4392790672758802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.deb0e792.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/fab":"=12.0.0-canary.197f64fa2.0","@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-icon":"0.22.0-canary.deb0e792.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HEkbzDrVjv/L1l5nYdmUBTmU7eUznsf6Qna+Yae13f4I1kserquotZSLM1Pz/tzpODoHue0me0zDsZTzb022vA==","shasum":"c0aaa7e701aace42f74b7321094f5d4d637dc5ed","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.deb0e792.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxZCRA9TVsSAnZWagAA2RoP/i52zMmrewyXsKDwI79f\ndX5o3R4F8Y+EdmIOdjjWXe6OJkSgogg9CEvFXVWWPaUtEAQtGJh8DPSj0LsV\nksXvBSEdkA/lAS58Cllm5lbgGzz5TJnTsCqEycTkDFe/qTvqlzNr1qds2lXl\nAswKJTJnA4MF9vl7juKdDfOkAw0/HCRXvJBgUOGtdVTXndy1t8H5xd3j+BtT\nkeFXKI+iRcUkoFMrUldv6t0XN43JrxpqNXmWATJbPHz/hGswPeYgwaD+g5Ol\nXbhZU0nESTWJIae1q2P+SNdnOVPwPWnBjqcNG+k4wIvJ6VX7S31X8YsYUHBY\nzhRS8TOHBp5JMxr/wFhN84XQG7aHpSKXUNKGeBLaptcT/2Zlao4n6wuqAXOA\n3mCPl4VCGxCjHfHToNKuEGVISONXr7TPgaJQgXZ7+j1P/v+JMKXvWoeU5IO/\ncwxAZZBQA28Oa3yY9h5Djibv0S186suVYNyvNDJfHCMW65GlkGu57/Bq3ztI\nfbXFXAMGTiaH1AERMW8Fc5sw90/oBmm2NEGMerCUTFzin7Y4WL7TgaFnmZuw\nlfbY0IXG5m5ezE2TtE+2W0nKqiN1EKoo/++rjywucJQS1ZA+4/dodMehQ8MC\npPQ6HCrS2cTSY+phz0g3GNcPSjzfiry7yCLYLKAkKhzBuKgKtz8Hem/A8SNW\nqJ6I\r\n=eICO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClS0gI33FFId3yjS1Mmm8DqSsJbxfSltFemUkrPewK2wIgZ38Q5SUM6peQU67ejqgIo7wnJK9lfMqQFzkt0QfP40w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.deb0e792.0_1620077657344_0.015978690897870962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.a3ff615f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.474836ad0.0","@material/elevation":"=12.0.0-canary.474836ad0.0","@material/fab":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-icon":"0.22.0-canary.a3ff615f.0","@material/ripple":"=12.0.0-canary.474836ad0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A3TeSy14Uges/JuTVFcusa3Z+Fv3cCWNdqaZsrUtcvOZePLWrhRart+EhJfoeXaJ7T/TQZbJPEiSNm+hSzke/Q==","shasum":"37fc1545dbc5d971b5bec517c3750452ae75c82c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.a3ff615f.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpECRA9TVsSAnZWagAAF/sP/3Qi09pTPQGl72ON4s7O\nPsNtQibu/BgaWe50xHgXZiwuO1LJS2e7Ob8WfpEjD86dSTP9TqRU56GhePj1\nnNZpQ4Wzc5uGgHlHyAjJXRTHoe9Sp9CE/7WVMc4Mr8jtHkziBncCJsEQlZhE\navQ1mPRoiKNiWoNGQ/puVcLyJBkM/OcvDqzW+FT/wB4W+K6xy4yiIyk2MwZV\ncZqlBMADUqvlhXzGYAUyp6QCBC70LYpJMNxcEaLFfUfxlXqpmfHzNe6FqVwf\nzAFNAG/ATsKPwXOZXmbcUXYsc6SK6twg//ISOBoaG24idLgXHP1aYoqv79dw\n/QZinMFJqh9C7gQjUT66HIBNZWt+ZSsLWzUdzQIV952W+/BFY5vuc5frlDbR\nsheWE+jCmUgjoDw62P8lgB3zXUjlqL40FCBIliL2w8VlQFCHtrlc6MmvZot1\nJ0wCmRMILP78+yq7Nl3AcAG6b3WLnq/WRLZXH2sNz15rXY+2P+iD207NrQtm\nis6eGxkgZ8p1Yk/QnMAYlzCRF3wsijwiROEpV6pw9j9AKiTprBRtAFkPeQ02\nQ+ip50B2lvBlXMr0/Ica7hliY4J7WUYQBD6HJpsL6OIeKD4FdH6PSvQVxIUA\nclK41NtNO9L4d6LSt1ySvU8Tvyabos3r3RYu86ojAOGfayIpeBnSI7kbP9TP\ntEtD\r\n=548w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkLVtNHqdD+G8waIS1oD9ojW1IPtLHxkikPjya/eKxiAIhAJKEcr6kSjPb1LXL0vAwnNlqAx99KOP/GFAX2Z1jE1e2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.a3ff615f.0_1620081220345_0.1423585226944284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.948ccfb5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.474836ad0.0","@material/elevation":"=12.0.0-canary.474836ad0.0","@material/fab":"=12.0.0-canary.474836ad0.0","@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-icon":"0.22.0-canary.948ccfb5.0","@material/ripple":"=12.0.0-canary.474836ad0.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oI+WhHwcOWTQ2v8wVSo6/88ebtCaQyGIOsKrSBZDXITtlbN3lbOuPBf23zA/sCcZLV43EVaIiSyo0kEqWHXVgg==","shasum":"db5713c51af32992429eed2b92f0e58ec854a229","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.948ccfb5.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEECRA9TVsSAnZWagAAfBUP/AluCCn1Vm2rH4veXDOK\nJua0cQZn7DqQU5Iu/VCJj5rI1n4cftUBTMRRqB/QGSzfPdY7ogHCDmlwSSk9\nV7rYW0l43gPCEdEKOdcBnmbBQuhFmFbl60d5nYYmMfDqUEWrpUidmazWNd3r\n2pWzEIIde3Tf7mzHrtx0nUJ2Q4lEyRttFqyTrnQiTPuVvcjrJ9aPUUXEmWOO\nPequxK8cD+neg4o0TGEh/FYYDl5sowbVwI/iFl2E9bjbXersndVyScigEn7z\nPB9tePCDx7534O9yh8OAptSuHwnZY9XMkntQ0sp+JV0iiEpZ+nqy1CVl3PlF\nVoj1fA9jhyFZDQ+puRyOHyR6nagNM7qAWbXgf6LgGwirmwkF9IW7cLw9LEVt\nk1V4+GruO0X2FLJiBSHr8028DogN8rZmXtXAQY++kONZQ1uwdbqJwQYVBkJB\nkyYDhkMBD29EhTr28w5iFLGuwHeM2A+WGU9gBDZMx/kd+FNdqWLJLRukTesX\naiRKatoZa0CDOekcTGkXtVOoMS8fGEuNAz2Cl8PCNrRcFKNoId39qwUxiom5\nugZuBIDL2iaXxbY3oK30AHnnGFko9B/nAgI45lzADZwWikHlvE3mYS8JBlKJ\nV8Fe87LbNT5JeUw2do3QE3g9UzQKhjmmWJSeydxi8DBipSpzLTRZPQb3roqp\niKyD\r\n=WyMv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6pnEelRxu/ZvTXs+kj/oH3DQRR+Tlf7C8Y46rjxnA8AiEAxwxS4KWDLGigHqQ+TGtQv3Il35i06vKfOtuTu4fcmUM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.948ccfb5.0_1620087044349_0.3187200429167589"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.9f8337d7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.be999eb08.0","@material/elevation":"=12.0.0-canary.be999eb08.0","@material/fab":"=12.0.0-canary.be999eb08.0","@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-icon":"0.22.0-canary.9f8337d7.0","@material/ripple":"=12.0.0-canary.be999eb08.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-foBxaCLrWO3TDpNznyWGXsetTmr4h8EQzuQoItuAkO0TXOOHAY+G9fwkqeG6/5ARXC1MMuMDTWq+uD5AQkFKSw==","shasum":"0f80e338804dbfcbda8b319fec8e638188ae4e42","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.9f8337d7.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZROCRA9TVsSAnZWagAAE2IP+QGzidRbsVSFFooL0ZfJ\nrGEYf0CDy44tdPGsUuU2gh5fY5LTU6n/0jFYPpxe4WDvXoT0u/yM27ULLKh7\nCNID+j0tj9uHS5sHFxvhh1mJqNbA4DfieDiX3mmJaFmF4Sjf20zqMG7u6Iab\nuv1UNvDJZBXtoHa11UCV/hUnJM7jqJP1y0+4iAepO9qYY1phC15pKTT1XhA+\nKTzKI8i0/zD8ICig/lBzR6sEnhdNpNbanxlsNYwTU5WIFlsDd7CRrzBlT8ft\nK0rflqaWTKBe/K12BomRTXoqlG17zQGOeTT6NrCtH7fAzTvlVYSa+GzaN/ol\nALKTO+oiGYxg2Qs2M1/ibYBId1URFqqV5558z+r1dHVHgceMEc1q8EHXvPbi\nv5KhHIqx/MkCwIK6z5MonnDlxDmhWEbU/Zr8MH8N172g5iqnAe5neAnHtxjk\n9A57jzaMj8V7TG9hJzBtwBS70wps+6bFTawHKlhOQHfv/awIMCyi0f8MQWCq\nAIBxeekvLB59ydWJUpFjr/riFvAIvWz1S6mW3Z9hKvMvaVvIt1iOp1vFuxOj\nVz2qD0tkgsNlTIk+UTcV97zby4yeSwkvHGMK3vvlou5YAmvu8hCmPIjOHgVq\nVB377uREm9dw8Zaa76nfEkvEVLjevl12Yb/oPZsucXl804EVMlGgXL20uPjV\nybQi\r\n=EvAz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYRQmrh4OAxJ9W1C+Wj3b/jK2eM6shqZjV3I4yUgXCngIhAJCb4wqwHxou9LIL6RP/N+DiIOnu5/PFH+hfNl3xSGZe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.9f8337d7.0_1620153422134_0.9050618395860199"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.5813480a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.055d4f10a.0","@material/elevation":"=12.0.0-canary.055d4f10a.0","@material/fab":"=12.0.0-canary.055d4f10a.0","@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-icon":"0.22.0-canary.5813480a.0","@material/ripple":"=12.0.0-canary.055d4f10a.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BOLYenznbjNbuaFPpjdWLb/uS6q7zR+61tnk/JpwrUsHMhhTrunVqJSZFW6jHE/bhQ83YyPrxqSECcGJqUYlTg==","shasum":"29dd0c3897d88a4b9b72049e171e4b9079002484","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.5813480a.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMbCRA9TVsSAnZWagAAMyMQAI5g5H604Ew7HqPLztRc\nCkla/goTOa9PLjt3vk9pidPcJd6YwKkvpP1vS76MDE6+8nixgeqMxk2Rqg5Z\n98jigz8uqWmMjCSH5QcbDEOUl4v8QOmCC5e5Yw2jfDGYPY+A8bMHAHULRfFo\nVqSOuzpeEax2NCd2bwbzphKwtvkk82bgAbyv7wz1XYVNB4GehNZj4ID7RAn6\n5ZEJQh2b3e465Vw7fR+gnTpeY21ud3iT3vrQi5rgsX5fLWLFVxPH70iSt3Jq\ntIajB822ba8HIj2G96E4/YFt1utFOpwGQNTzHxhMfPeX5ONlYewzGOS76Q90\no+NW6seW4yV6bW18R1ScSJWf0nyJgGvbgpO0OaCmA+NfTQBDU8A0c4hlBWE/\nQaBUrykZMOaOQq9o83eqc4IlLrF0G3grvMccdyyaUH8T4XjnJrH1qnrV3HNO\nGuyJz+uYcUDViyScftYzZ+3UAXO2FAe5JtGpqMq45Pqwo5an8R8INMCl46oP\nZGi0uDJy1zu2iG7FiirNrzOKIMGy6Ejmqn6foRwqW/4RZZDraZKMDf9WDZZR\nJc4aAlLTKcb+AX9Nsy4L87bVAJI5DIMAFtbIwpCe6ft3rKdfimRLP1m03mcO\nml/uivvDsABuYKrK4J8nrfgMI+Jdty7cjzOTUC/OYIsRB6gKw5vx7m/WdJyO\n4lfV\r\n=waXv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXXBpzeRU5MxJLuhcHakBBhBEzqFt2j8zRunX/G20JoAIgZHTWlgxPhoRkFuQ+aGGuCVSRU9bane9NT0kTwFqXjbA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.5813480a.0_1620239130827_0.8977129043737915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.ab7fc1bf.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.03f525f9f.0","@material/elevation":"=12.0.0-canary.03f525f9f.0","@material/fab":"=12.0.0-canary.03f525f9f.0","@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-icon":"0.22.0-canary.ab7fc1bf.0","@material/ripple":"=12.0.0-canary.03f525f9f.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G4w3tdF1HtBymlrvbRXzEy+meW6zGp2HXz7JpwawKeYsWyxT4hx7y8q3m0hoSW+C58JEBUsS7MnN+4J07Vx1aA==","shasum":"4b117b4ec00e000bae2ee6b96de399628bcd33ba","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC54CRA9TVsSAnZWagAA46IP/2pK6KUfZLtGk7oLoP4X\nEBbUqRpNevHn9k1+zpUEUVNYB9rUdgfCDvcWwFNVgV7OYHM822BxU/D5DQPc\n/pyyKLUcEU2RxBZW4DoYckrJdy3GE9DtkvXi3vPBTIMK5WJUZn0Du3d1elQ1\nbE480RUgjwadPSdZysrQv0ILTB9PnxONhqCR4yaRO8MVqsoH4rcrrIwbxSFp\n5ET1aIKj2Gq/a9XNOiZJh9yBbsmgwQHjCxeXtThhc/TYhYU4CeLjYhdJt8QL\n6O4HPA7D9QBL6MLB/Dfeg4WLPuxL+frnQL6CzOJ+uyMwOuYuatMSonPvij57\nQSMc6efQLbEFps85lKLUAGGvXPu5dWI7Lmbsav5ldX7OK1mRQTH1lvMJwLgY\nIPSO/cORXN2MYWagIKnrICt5kHrl1rFNhMdmb6V++FQImkOOqi91oSAtDw/i\nmBnb2CaMQw0TIJDsK5It61RVGXXxZsCpFSQWeYYYlA/7ySx5pCwLMLHBicx0\nbjQ0ihDhEAbBGMpPKOMNeQbwzMdZhWUSRSIVczYlCqETSJifiBiHfwl+7oe2\nDKKLGK3tk+Nw7hD2ld8NTyqRZ56DGqBc/suEIkdC8g1Zyr8BXja0hqZ5549x\nNfngJbTmHqlmbswVSzOTvirTZqJVe4MyFuc34G/CEgQpoMsbG+auTrjiCtQb\n4LH/\r\n=IcuT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBBHhG6cZQGXdCksSA3Z/r3LgURUdC6o6k13gbLINmNbAiArFg3kT4gJyjQ3wAGRbfqa41AL8kjA6TqPTVffdFjRpw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.ab7fc1bf.0_1620323960369_0.07057128392932133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.25693d60.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/fab":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-icon":"0.22.0-canary.25693d60.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gV5LegNJyOr4DmF+v836jj746Y5lygkEtNdSxSGb4OuEYJVb0Qg3eaemLqUum5ZpwgQ87MBAX+NKDLy0lHZ1EQ==","shasum":"d7d541ca3e6f474c5b17c048ec4d49985db0afcd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.25693d60.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbd0CRA9TVsSAnZWagAAYQ0P/3oEjff6nnqxWmWS6Aji\nd7GU0gak1jq/TD7g176d/l6an/vVpH2NWMOmpxX4GrnjHCmknJ9GWs0RLLNQ\n7MFEEqYBIFCbHfZeUBy6rNDZMn35bbBPfnYctBCYiZ6sO3HLxIeMq6yBmeRp\n6gi4ZX9QjPmQzkDEPVHJcRy5rEp5msyYyX99ZIOHq465001THILn0uqfEPsj\nByl6QWHCJacoyAKiJ8Nmxm8xVBPEqg5K6uN7LpusDTSEvCaNiBDvLG41Kvhs\nZ2yBO2KEAV29EKUaqFITq+VDQkKX3OixkvNA+Q40PhU5+ftKzy5anH3EUWf+\nE8/m3iRImj5sQbJA1PW/xOtrsjdG2cxMST3lK7mpPRy9kKwZj5RaMgmn9VKD\nYfO9WP0QMrsMs6pyV+C+LS4RBrXI45ZLDKnNMsB2GjqikzeJxqQqDzJ2r7El\n9A1+yrk5oBIiiPRmuN2svjVeUVKorfcq0t+tB1OE0CEXfiyYJpIA8ge5OhIN\n0uf4560l377s28tq7f2OdkzRrZYt4gOuQeTkpdZz6b4sVPGBAmopBxFMzqhR\nNm37MubqmWKt/E4xvAu23ReXyuUfcSR7kiaOabc4wumPHcUvnRaEeknTkkxl\n1KhNLGF/lJGnXsGK1Ajyk3cdM8tjv1cxsImiqVS+jY0EHEDZ75S4UQT1stGN\nc+jI\r\n=3L3A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDkun2IVhdSDZxynQ8Ol4Ci1pi27SCMSNIQEYda/NsRwIhAIR96odHL7mzwkiI3ERHwqwd0QyhKNZVCI20q1/gQWPl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.25693d60.0_1620424563128_0.5207392815457204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.c497962b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/fab":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-icon":"0.22.0-canary.c497962b.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2Gdpu0XRcz590jxnp0c21ENkzyt9uohJ8INizTAjov8ZVX+qaHQ8YAOIIXMn1M+neCmdxcnuX9mb6ATJ+h6iDw==","shasum":"17bc989829655693de8a336bcb8ae20ea9b4abe8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.c497962b.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0MCRA9TVsSAnZWagAAsvkP+wVWsV5aYENV8D0n1dw0\nKx5gCsbSkn8AfI1L4MZuuhdvb7tjeeFsxJ1gY5leKFS1FF4tewOTjQNvvoWJ\nrAKRIFU+B5uydCN55Bo2TrfnViBlU5W9JwLCWd6n+hIGerPPPteRIsp0vaDj\nzByFQ6ZMNCV0vFEMHkxBtRXZzEpArVyYop6+OI5/9W2ZaNmir64mqvcEI1yc\nWj+rWvDFJ25m7SWI1xyN3bnyfn7RZiyBIpY2yQCq0oN+jPBM+cyjy5C18Vj3\nZDuYwkM1y9KWcQuOQfGTgqf/SbTBgF5FVHmGIbNOVCtZpm1PWpzo37zfLqJ4\ndkS5REGsPfGy601GuoQt/j68oyqFcteFXYZ506O/WRB5uTDcQ2D6lwEwFztK\niwpjEU260rREe2EmI704UjW61+GR4mCEnkXDYYCCHCBPGNGyCUZyKx0KBH1c\nS/+k95eNFocE1D+F3Qs5KW9BLds03T+/DJMqtDjlySNB6+G5OoWwZKGu4pZ0\nO6xyAF5dftgG7y3MJOyRGZGl3Puxi24rpKTtFhgQB8kc13nXLMP50ZYKcfDS\nYlfuterHkruQTofJH8eInikHqM38nUxk2qN1RKF1K5lk/9TbfQgR5WGRSiOi\nmRoZa7+tiAi3xLJ7gJaXyQEQNm1NF1a/lBKN3QCYkX73SQF6K2MVRSPrNwNo\nOvat\r\n=czn3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkoQgQnUoVMvNef06J2SLe09XxHg5QSHEo3q//TpJLRwIgSOVU6DLKI1MVsbkmIM+oyxsiLNZ1M2FxkyJlpyJ88A4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.c497962b.0_1620425996018_0.14649941074634354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.e300688e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/fab":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-icon":"0.22.0-canary.e300688e.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MoOU+/JQ3b/IENneZnPZp4+i1aNkfnNuRSyeZjjw3N6un2A27OlEPbslViEwGM1Es860rG77VWhsM+sg4Z0wDw==","shasum":"3fde7888839285ebeaf01930c8d764d0a18880fb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.e300688e.0.tgz","fileCount":16,"unpackedSize":75107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4YCRA9TVsSAnZWagAA7Y8P/0/SJREc/l45EGKoMbLW\n+biCuo45Q/igRk+KeS7yM+AJc0qolLEALngWng7jZoREQYcub6SrTldgm9gS\nX+SXhDoXyIAjVp/XBFvRs7sx/nWQHTBb7426jD+MbmavjWQKlMxZjJSy/+Un\nQboZd8IFTQvqTzLZNiX3XjIea4wXstgo4uWzdsyi6lpTtnqu4exatq4BE3sn\niVmO8PpZz4xlCr1WRsoJsO0m6XnnpE/i8cYkTub+juq8oRWv+CdtWfYuQT61\nCsI2mnqlQy/SNWBPCVMBMkshJZlsBjKMHx1TOAj2jJ9uLGaQ/seHAygJU+Rv\nQNtpUArK+9lHSlRwUqe7080NOm9VYKPUxupaik9hkvTJY550INrzax8vl6OY\noxMP6Rd/QW6dYCWxanV5LLEViS6wPN1IBM+jci8d46hFrh4GKzMStN1Z6ZID\nuEmC+XhEa/LdQnxq+xTVyzq+lKPff/SyqH1YoOSDzZweWgs8v2wNTpEGb6hB\nuhgwTskbUGR/9vWt+qnJDaEsPbreREuN5VWAyOQj1wL6nXs7T4YbwI5q+Q57\nkMFpm/6v8+MzuRgm5mVkgrQVTw9uEKZZfLU5nZpycHoWT/VjMs0XReEDWkQz\n9cuyYZ7q+bue9wvZtrFmTyt8jS29GZyuqtJ8xtVyoRKmxsNV8yRfSJehYR4Z\ne4Pi\r\n=acfQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHiU5i86T3/mhr8PsODxFtnTULs/SrlEXjPXiumGfC3iAiEA7EmTpYjT4YzaxJF0MBBpAPJBA1nsGb39jq3VXeiIHEE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.e300688e.0_1620426264411_0.9162545628748815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.d70287f2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/fab":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-icon":"0.22.0-canary.d70287f2.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cXsuiM3qQXGsB73FBXvdt7uBkVAnOP+GuMPCy7zbvYKFnX5bqZ0gj47OOg2r6HtntLqnL2As/nl17qCgZ2tZ4A==","shasum":"a42cca6c521ff85e64988ec4cdf4cd29cf26c6f8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.d70287f2.0.tgz","fileCount":16,"unpackedSize":75058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmOCRA9TVsSAnZWagAAPgQP/Rcb2DwpuICx6SdH/B1q\npTgqgBfAdg198mTRmYA64tQEBQc5KdPb9oYtAZbnjJLBPiAQmr+D4BH4mwsG\nQkq8mgcqpTvwxcff/fXMkk9rkCE76ijZWCh0nB5QUNDmt66DrZoe3reyV+4M\n5ZafEi4RrFC3i9YyqRDzcTu/FOZUPl87PjCydW6gBmv0A/03Hov4XLKF3MWb\nyD1+6YX51oVhvAE0ChgeaLtNo/Jn+V/Vqmy81Bl3lccDEPASVxXemMEnWSYM\nbkKR3b5ZkHUOiJRH9alPkawNJjrbqUr/5P66St77QF0AzYmypX47n8yzqIKT\n8S/6PtRhBE7AdNn42HV2FeH2KuYZf+rsSKipWu2FlHs0qTq526Yt/Sf7fynM\naU/Tq1DeVkk8edqy7vtKu5iLkUZLnYkh/FrtC4eXuh15iRzK5Cde8vj7lxiP\nXWGAYqWUoGkBCDXUsC9TTZy9wuRPQ+/KLKkk1HSEwe/yQ2csiYfj8LaEmbEk\n9/bdJVOH0YMsMXVK41vlFuYIv+Rn4tLUxkcl5mHl3oP21mZiS0FGB0SdHzMx\nE97ZHVVEJ4Sjg1AGtn9KYAUvTxPDndJSGF+XqP+Dn29w+YpM9ZQFGcaZj7Lu\nry7AR/8CUQq3jIK5g6MpJwYGTD63gVuNSH950sQ0mFmgRklFcjyPwJFXzTa4\nKFF0\r\n=SKbS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG42N6dkXkRfTpKnMY+3IaTt00jsuBdEbsc4HRwElHnNAiAodtT5s0NSMEY9C9mwsAFGYAUmR1bQRzXVEWhePXWIEA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.d70287f2.0_1620674958130_0.19397101991869947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.02e841b2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/fab":"=12.0.0-canary.869d890d4.0","@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-icon":"0.22.0-canary.02e841b2.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YNa+BO6Plxgo9D46Vbkpc1kPxR9qhmzoKTF0bPjQtmAjXGlBWpsaAa1N8t1wzQ20T9lk1M+T6fN1pRMP0GmAQA==","shasum":"5d5a531ac44668d06935c3923b24a3d7dab6e953","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.02e841b2.0.tgz","fileCount":16,"unpackedSize":75058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjdCRA9TVsSAnZWagAANyAP/3rLIge+ujnWQV3rMKPm\nlj39HMm0wTqvOxhQKmiOWGF6+5Mn2xn+QTniSneBTwc6VIngtdprYKl2C5lb\nACsJ9IU2qX8VBdhcntxrCTZi0merzHgvUcsWKx2+zIA5Uvw6ubbedqs835qZ\nBDYTkaaGKTmfkqVXU4mPKm6Cfxs26qRKOCazfVAXSjhcqEPD7CUqDEm9GXe0\nOE3CYRf+TWIackr/NyPfMyufxBsbTDdgNsCAAnOW5HQbKqZeUIZbv1mHwlUt\nvvgqeZdCf9cx6jOFcK5gIW1y4trb+oEEOgiGdjnDV5PA600pbASWGQrLHi0F\n3HdhNtAXmgnJV6pqiaziGryzbd8+//r3/yvBhzbM2CPGtfyAAXnZC/fwhM9l\nUlTibyA2nMHwMKq3mYpKt+YetUozbTfKaqUjh4N5CpBVLQAgv9dWBT9x+R3j\n0pMM2gyoFLY+vdYgEo1fvTGNPB5ZCR38iQYyzDF862WZOmbgT9Apy+UabqrQ\nXDJ3TszZDOouy+kUDNB9+3KvVpwPrAAECIxORCghE/bIhabagmd+nw7Lngwr\nH0oGBDpjYmpS1jtU1hlJiCvDHO1u+f0Jk3m8KFnyFl4gNpX8k17A8I3Z2DC8\nhxChKYPY7af6HoHA2Plh4VbQGmLMumqJHOPHq0YaDzNQyNjAVncLcIwidEdq\nXOUH\r\n=2FSC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq3HSSVNYO9WgAzhefbub9NUq9NufmVIMnuARFNXs3WAIhAKripxcXOvFgAhKuWS4gRuHFywhQtt1NjikqBH/vOK1m"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.02e841b2.0_1620678876694_0.41371178411242515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.badda2f0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/fab":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-icon":"0.22.0-canary.badda2f0.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bRx6APQ7z6JmQD8VZCEDQrqpUFep20ivQ9Q6bFuaMdD8hUAMcXeEADOlffNII7X2OBpBvrnhKgr6fk78JSzLzw==","shasum":"2817d2b313462772c7cf97d0d988e3d8729f339f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.badda2f0.0.tgz","fileCount":16,"unpackedSize":75058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEgCRA9TVsSAnZWagAAqBQQAJj196jxnru4ecMLQOmd\nGlY8pLsXnyDSGRX67525MEd/F/rmUm3bloWRimXD0NILO7LFtPI6DrWLgDAI\nFVfuo4BPApxSnfHYd/0OjH2nODFc8haiPGG7eoIuXHosIq7lEO5Zv0RnbhoJ\nHG+15zQxVlSjt9My/J8ZmZ8wQtxITy4rj6O5XnfpOMhP7BKlRS/KXz0s5kLh\ngwT2lea8oe3MrH8MlzZTXIuokTsZQ/YfB/2mJadjooVIU3kKZJJwAh4DoYg0\noAsrQ624X8v4BqsRG6vHuNq9ZsrpBsB6ciOLFRBRRqAnpA2j2rNeAGavrCJv\nuqub1fQzFA+Y+vk4m1/RArYIjK8nluGFv8+xcCKBi3wyTf0RUukRs03HiyiL\n/+yAMjzIeFWKiL1fxuuj5lhrIWRji8SW9vvhmYvLY0SLt8fjzy7StmIV9OG5\nGuhh2jGiTRpq2LNY8SV2EvmNWXLaa88ofk2ygPnkeroL2cWCZReux5mnehB5\nfLhCH192c2gXLlQVnAKX52LFbtGgtAOVg1/SeRSMQ4vXti5uO7W+9bMID+CO\nUQ+x18LAB3cud71mySBeRmYIzhsYbw1Ctk9e00EecHQjwT3sqNw6ztroABAr\naI42AipyAlkeoPEjWSJmxJeEC3DobX3aSyWY+9KafL0z2A9m6zOI6b0lHv/E\ngExt\r\n=dBEQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtbUS/XaIQSMIBGLDpDhlsK/eSTFRm14VrU/mE0AjiUAiAUOzXKMdnbIF6UD090Ld4wNCanvJYzzvCXSK5O2vUn0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.badda2f0.0_1620693280131_0.47015118181363347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.004aca62.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/fab":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-icon":"0.22.0-canary.004aca62.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Htl2CKDb/go2DOaGLzeNoKgqX5WDaR2PFBjLJ8TjuljTeZ+U2dolGh/jj9IKuaa4SEt2cctuFqAkM8Mg3HMB5Q==","shasum":"52d03c4822b32f273db79574ec36c4da96275196","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.004aca62.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseeCRA9TVsSAnZWagAADWAP/3o4RH0wFpT7B01wzA6v\nUDKFvCV+ow6414EVpGiYZOqP93Pc2ht4klQtrzKvzw9t86+/oE5BhvLZbOjQ\nDU0V7zVIZum1VPsCFX6leJjc3qwq+A5QInnPL7Q1pQgckr5pDaWuthE9nnLU\nZpHz84KgqvAKZsjkvM98OQ+O5yEOGKW2G72Xc9aDEp9OlzvHrCGKYWt2Ol/+\nAEbXBDEolailj0Qzm/GcvG6pbwia+8SmUtgdHQjtHNOgGgHWSEGwdBSq6xKf\nz8OUwSBiT8LfnB7yuPUOfShHclLxpux8PG7R18/bZrXEuPMEvHq+PuqQd33g\nD3XTi3DhWdgw+EDVyMb5EGAbk68kz8hTE/4ESjDnfSRSEJueRriaWJcf4rRT\n173S4rm92aKUMnNrpvf5JPaDfa1piU2ZrIXVVK3wgqQxKdLwTeWxXTtkHaAx\n1TFUIZPKLwUDRiLs4jvNFoZPZOdOeCN+ciZjz01nTkKypUZvvwd9K/SKRZcV\nIpMAE5DLvN8mjgOzjM7CJfT2Vn/ioZl7XNzUtWBeHRDAhnOa+IAFcAB1ZGP3\n2fG28BM8XPAIjq/u+TDhUBzbk2flyklDW8C/O3N+qOz5wwjH2/wO1yIpYkkl\n8QvjZeXboDrg8/WX4ZgG1PP9E+thhm2H68G3oXjVa77WrBj3YMq1OBmhYbwY\nrKbh\r\n=+Ilf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKJ8XIXffXg9N/WbQWxNv7EqfTLdtHsNzgRZOYkjXHGAIhAIA0BvY1Y7ODHfntKbAMgpLlKHf9KI7hIwOK9K+Eg83j"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.004aca62.0_1620756382185_0.03996430486646707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.4af17446.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/fab":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-icon":"0.22.0-canary.4af17446.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TLSIDtBgO8LDuf7F6Ziubb32mA6ewuCHVBOwTMLIFezWzxUx1Z73RBig9MPPs7jx7QESEnmbcwFeIDkE+JSPaA==","shasum":"019438d8a45bede5914039b22b749195347b34ed","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.4af17446.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDzCRA9TVsSAnZWagAAmjcP+gLIXoDQAQc4ptu/N68c\nCDk4W5XkxrBKq/ClUFGLEHzoaqHN3L8F42Y7I8ZBXBp/uhmqqX4dwx0zYyqS\nm80uizlkK8WilWUIUOEwBZ6BsEVLWrdr6SGv2fTzoPAqVLA4My9GS8AYWENh\nlHgh07e7euoWku4Y3qT7rWglyx9TAyQeCzPa68/HSqIUoR7mDLCZe0LdIxiE\nTGSefuPxetOA2VavSCka77YrBEsFbnCDueczkEOqKwnBxB4oSf3moT84BdR9\nQ8p76lRqs8bzMHNRagFGhKRrYwU6PQ0tTPCzi/lYP3DHoPEt4pQlwvaPnY8O\n0W8FBIh1V+zii4s3HlgK1GvfjY3v9g99tFvm22xIp2SxJkjmDVGvMlKs+R9g\n/Y+fkoaciCOa5m/30Q8fE//tj5by8Jk3RiztVquRxuDb/BWu4BAyqdp1VaLw\noqkPt6g7cIfJvLdIwWIf66XiMfuKhsGAVkOWHiIQA2KfPOeigJGtDztgBrUY\nyjrGbk/oEvMWzz/YqccasDZrEOTcgSpN4VyySeLc942L9q4Abvj3pEV4Hi02\nHynwcfp1iO1FdQssJJoYmv4DuzOVfkxLZs2HUgPfRaWVzO1PmepJcHpEj1rE\nvYEh29O3D8VPg3q5P1PyktDIw0BKg0TlPjv8L/w7cJjz4tsKgXGhuNQrr6ff\nEgqw\r\n=53zg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk4JzRJ3kj9ztb6YJj6B4AWpwExcKj7I6D+UyxG6DjSQIgG6+7evUY2MEE6l9A3/d8FJd7wGhqBLJR6M9I7hFDaRg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.4af17446.0_1620758770618_0.26316005524191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.b94d7187.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/fab":"=12.0.0-canary.ec22e1da9.0","@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-icon":"0.22.0-canary.b94d7187.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YroL0kc3JYOpczrFKBa8Lg2dleWbVymmx9I5Gt3ZadJ+HCEoe4Cj3bZZS/UpzL+EHaDFhOBUEnGYk0T+W//wWQ==","shasum":"08e60e7b87969c920da47643c791f154f2d7487b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.b94d7187.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJBCRA9TVsSAnZWagAA/hQP/iVvHE80KYSslC/7atBp\nQIefPiWzoMjYoFC64vA5D2C6CgA7j0WrNIv7Ye48UJc1C6t0Th53QdXsl+pO\no7ZAg1+PJyTGB4T6nP1OpIq9F9BPycJL3lCvQpgKYtjo93lSPhU0vpV6XSBC\nbosmBY5TyUan/EYfd8irdgLJbVFQEW/9mu0A0ld5psaIlpf7J8eHB9wGYCTz\ncD3pMy6VGcCSt/wRMvC/GfAGs3v20VpFHfqG3kU+ONJSx4YVzyP5uy5PdCfU\nZdUQe3b4trVlfgC67sfd/slPVjiCdKA+DLE8TkJqFEgAvtOAd06UT9SaOXaV\ntX8b1LkUwR4lPDYJUgLBm6qoZncQGjktGTWNFom6Z2rkHWXPguY6xHtIJjBt\nUacQwsvew2S2wMdkEqx2TzWikPa8K4RdsFSxSvxwavtG4F+hKNoJ5Iure+es\nEDfHuIt7yEHgoMgjnXuXBf1VUlk++/Z4QSPsxJfqvE+MlHtocFQFpXPYjWBD\n3J9ucTPCay0oorZp9M75TmX+Qc9ZbBBEYC0X9ly/L1I4BlruUD7+miLPlVet\ncHSLMp2pQqnJzplAP2KgRYxj/BLtBd+jlt/BBTuTzTfjj54RLvkxF5p8Jb97\nlK18BEC7QnjkRlzfKxkA+43rKzjYjIhwi4VgAJuQdWmqSM24rCnpYFhXvZmj\ntB1B\r\n=mqy6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEkcrZig3D4JtNOAysKkbqpQXITjpw9EOmOuIC5zkhGwIgfY+6xMJKqkpXH4hiIzYGy5to776FSjc9v01DvlvR1nQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.b94d7187.0_1620759104933_0.18213092985850365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.4021b2f9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/fab":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-icon":"0.22.0-canary.4021b2f9.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W0+qoZYtYwBFR9l2aWZdL2QH9zBox0G0f/B+nPsZ8HBEG368mskNsUSkLISit58BdhURQMqVOFaabhZwkYsUnA==","shasum":"a2dbe3afd581df8b6273f60ef1e0d6484a826294","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.4021b2f9.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFAGCRA9TVsSAnZWagAA6SYP/iH5zN4S/PHIX2xeEe6l\nAzsSbxH473U4HJMQbdCXqo0ttpOt0DoG1X1a4ULMA51e0W461P2g1y23N+9V\nPM+410kntNZ5Lxi+RmRh+1PkJLjjCJI3/9Dw/Td/f67JU2F/eVO2JhovK0/Z\nEfw3d7u63kePv+HODo1KvTuNAoY2y6GsTSl13w2kNG2vVv92LnBhYKr0X9/e\nrSh9ILvvtqXzhzlWJFRwx6dCSFc3d8B4XfptJa+7Rm6D//b2QLCw5OiJO4TD\nDI+ntxwCbYnJmBlQJ4laH05BKorvX3a3wxGyocZ+OJVxBeT04BZaDCUseDqt\nr6VD0vzAAT1lC8Bm0FxjJfqzTLiroTZz4eeAIW5hwKTFaA6rR/58617AMFnS\n4YBro0oKw17meI1POPXx0wWAZeeJHUG9JVDqCZFfu08TFeAGnQwCzwUmk6T6\nF41W8b1CIY8IW6L6rf0dEfVUzPEU5Lf541+qQUHXmOLx+0qaqQxodhhvmYiQ\nOZTfaF7NIDqrcuqfrgCTGyk8Yd3+3NbwO4qgu43Vk+aerQoOn7SugOAzKjDq\nwWGt+U54pO4dozW2iF/VDh8lew945jebNe7to5qqeNDBSJlsYMOsAVgAYpXV\nVaxdQK6D6TlYNcrCSxxBfsgfNtU6mYisihm2I05Wof8biBALAwJtllLE8Yz+\ntAUW\r\n=TWp0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfOptoGzB289DNACmeFvQT17cKUdYKp+DlFtTYyBHR4QIgOkP0/zqr8jYtVMvOAlecLwPknzx8HsDE7kpAmBemYtk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.4021b2f9.0_1620856837853_0.8761245225919032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.6a5956a3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/fab":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-icon":"0.22.0-canary.6a5956a3.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OpYr9ScQI5kefv2z4Wm+C8kyGhuHZl8N8Kbpj2+coF8+Cr8iOjVousVj6YHk+XjFiiWZa12qROxa+kV4B2vjnw==","shasum":"5905c220c34a13c01dff06a7434a5c8a96029e60","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.6a5956a3.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFP3CRA9TVsSAnZWagAAq7cQAKUNPyVzETK8bpJeOJBZ\nhmZRmfI8unFdA5wzGSJ1ycmQhQKrmCaxMWdf+LDLsws+BqdvT3virC/nxCl+\npwzIEEqfoH+4CvxL0GNyYAHhsZdH6Y5oYK7U/qYQlK/2jRqsbxgUr1j6HWtz\nfCn5DJvTAeu/XA1jLM6TxwZdtW5njtx1vo6bVs0RcFaCnHaMns6MBKCYeniO\nneu9q0A1wR45q9m0vH2WXRASluMiCHNlVFcRDiDu1NSE5fM15JkwbaFf9IdG\nJIJb5YBJT8hnZICzjPH3TlheQFFiJCkmyzis1IWz9G3r3bUcY0lanUhvg0b+\ncW04NkereDK7/Qhy5fInpwR3hD+Xve6DX6H8R6rpm/QQQrXAVW5sGbyUe+uP\npLFsJ2paIU/iYdSfgSciTeO8N6M3KbRbAFmfGmZr5Ta72y/oShv0LIg11En0\nqjHldjQWYq1GHL93NH9BMf+tdPb5i5aIpApfY15K/Ok5aFwasf4enjzX79Of\nFDRwqqzesgpHAR+tPLMPuOfyx0KvwOA40joQSA2KrPxBUQUE/0qQ5J68Rwjr\nZTa+lKsuLiKJ4EzAtXPot9RRMzkGcGTGMlvf5/ekdx7kwj3KVxhYav/d1T7A\nnPKpc/3K3dhNMUdxUBMKAa1cmDvfNEp/uFdqWUI9fJ0RaT2hPTC2dSFfgaqT\np26S\r\n=+jQn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsNaK6hRklyzVv+cmwAVCxLka8jParxSqSmNeoAysObAiEAsTkM/HczKFI1cwMHwFoXsSheWOPR+vFVOwlncYrAdI8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.6a5956a3.0_1620857847399_0.696026079727855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.b6e8a74b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/fab":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-icon":"0.22.0-canary.b6e8a74b.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DDYHLF8+2Qix6LOjZKv0lHTlZqRHI1QZesheZvflC012fYN/aFTITRVB6AmU+gn0H0IMrvazecyFZtQX3MiWOg==","shasum":"cc68a1bd2db4798fa078891d6da5512887bbaa52","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.b6e8a74b.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7BCRA9TVsSAnZWagAA3aIP/R+OKlA3QWZTAYAHJ8jG\n87SV4HGtDAVUU7cvWQfx1YAIkCqNEzzZyr6Vtl0d12CywgjK6MY858YBAuv0\nMi20K6yshchGhZjndlZwiWI7+vm5RARWVVXWHYB7GAoxQi0P8GntWfgCI2lW\nVGlNps6vdeiSBGh1aJsja4b4p0vhJxLwg44M/q1W2ATFqXwLaVE9AF8Q+FS1\nagfLKr0wXy+7QS9/8W6AanSQ3Ony4TvcNp49DhSbP/eG4RyP55kr58jp9f+Q\nmfdPAmZU3K2gV78QBzqdyn+wHOujwDYbcPEU6NPU8TT+h55KYhWlYbxMs2Ov\n9hfngkFGGUWkoasFH44sl1xQcodUM8nq2O0LfuGsznNok9jnQgK2U9pVESmG\n4CylmYnUliZHD+2wP9myej2xVcLi5YuUWnjmn40d0+TnANXDPn/NE33jVxZ9\nCG8xPX6NveQ0zF581rmsYxuZGyUmwsDGLMIzWPPaQ18CJWzSKKbpqKYDUinD\nYsAqJ9FfPoJ3CTGCr1hAlbEkrZDYeer9yOluuZhuxjjaA1d16O/8orNNyT6M\nb8H4fEMo9zd2CfhiL9NcWOG/3QLD75ubO8qzRJu4SKzuJwUOtiTYpk8wMoab\nLu1NBCTrti3x8noza+RwyImMDgpXBFvxti412L98Z0T7WjJRFQOCR989m4iU\nhqI4\r\n=v3VB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLHcfRrad4w0BHCTyUqH7EVP6BC+Ca9cR/YAZRWJqJKAiBNxfoHhV/tE3YKuP3l+HKT+UQLJjcJl0VN1sfclkGgdA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.b6e8a74b.0_1620860609324_0.1952813129667077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.c94e1030.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/fab":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-icon":"0.22.0-canary.c94e1030.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lItrshja3Q1HdHS5PqTspl28P96lmEBCoFja5CK4pulYy+rSnB+yUWrq1pDGyxH8+N9BEMwGDlyvfm/+rMrZrw==","shasum":"3e4d38b5eea05cada84759aaf62db70acc436082","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.c94e1030.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAdCRA9TVsSAnZWagAAaj4P/jkU+PNgWwPw4c8pHDZK\naWHXhlfLTULIzyEM3XbGoFg2C2rh0Uhoh12E6x/VkduUAecCM9kkeMUzqTNP\nk6zacpN3++ZvswSHVmQz/YpCKgGuB6TFpD6k/pLLI2HwlkZjcRswCGW2Vul+\nh8NLhjvHtavCpbFjVMOPKA8ykbG9Kx11j3eLwDkhmZf/iV1EIu55bhTR8Pf1\nDRGSrMJun5SGDutTZPd7Sg2hT5v7V9r2euOL+s5ZRds7UNgPc1exAusgb3CZ\nD98FO4kJfKYHHrW99cpgNey2qyZ7XUVwnGaWMQmFiQI0pxkAsl9YtaFXpk6Y\nnqy53WOrz5hc/G9VV31YjU8U3K17C/l/XXlpr2VXSTmy4mZg3xaAb1iy2WiX\nKefaZ458EWQYS/pBh6PAKkfWNLRf4kyV2A4GzI8kMOIJPssTT6clwT9EZfht\n67XRIdIchlRCuyKB9yfAn4jA6GGKQkmMZkEf9v7cmwyROWZE+f6Jhrn7l7I6\nPIi+3JVYfDhICZZE8Lm/kyxxPWT7Dzu6tfQ/MChroL+OlQkxSnFh4yApQ7zY\n/UT3BGach1LBj7MyDww6uJPwoZVKoZijCT//py0CWofXZwYEPky0PKcoBzrT\n55O7jIbi2iaEwhOwVO0NLgIQnvZFCluxWZJ291pQRD90S02tYZtwQKGEys7W\ng8GH\r\n=66yn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5/sPwJClmnPvlLC5us2X4HwBJMWLhUUzjiiyATyI+ewIhAIfVzsr4HLEagzHthzina6MZOx3JEDGSlT99pmkNXfx9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.c94e1030.0_1620860956857_0.13987562588712166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.40a34e35.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/fab":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-icon":"0.22.0-canary.40a34e35.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KSG6H1cSFNik+yoo8J30zheuroiwD3Fe22YXmnqukWxTmB0/0cs473oqHJ45iXxEkpL4IFMx1kpYLdvbjnq71Q==","shasum":"726bd19f7084dc1833619546cc8c820e0a00b483","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.40a34e35.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGulCRA9TVsSAnZWagAAzc0P/iufn8Lq4RqG/7tIsHS4\niaC3L6HOh1HbYUW2ZaPkjgdHqvR1d7/vOHzMRq/pDmnYvQSGGWSvdH+1iXCI\ng9kAa50ishMTfTxq+6gvs6SzD+84UkMvyxQoSJeMZVYDVsEi9xQ0RK9h/DjH\nkCxil8qSASSm/V3nSXv6NW3jXNWHxWuFRAu8gBaw8Mr1wYn6Y2X/SbSzghfp\nfcSDVGjYoWKeF6tsPzBn8WkI5cWEIAPuG8uqc9WULpmhjM5XSYA7UMyre1iK\n4foI5+sJOgyCsSC/Akyg/AwVkI1/8CRkM+JKirsKkUbPlBGo+3dMJybc1Fu/\nq0VOipRnktk6SGqXWbBwv94anIuJ4ITBhOglMMqIbe/c2uEEvuw319DbkX2n\nllCTt7w0BGWQb2A9ruASr0e7V8UepgrU1SOffDt6dTmgb3DHYuwnkiJ5gQ+B\nZhnV3Rs1DZI/Mc5cNRF/6GrkLyMSMuvq2mwYzsT07JqN/9djw/znPSim/J7W\nbb2xL3EzaENqIjGAM6tiJYZ4siJqR9C0wW4H7jdm6gmlPYw/g6IUcLYXhhdr\nMhTX/TnU1skAKTDtOAQnnPhlft2oyhXX0i5CxcpyjLn9sZjPFLGqb4O+auk8\newr5cepeclY/HUAKXsc0gyOeGdFnVda2wrvq3BPpcZvRRECOkfmmVUrN8uT3\nZOaP\r\n=hUH6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGeQ72rNgXfuvIRyy2h0e4DEvt0wWVomdk9UulXNDjquAiAZ5T8IqNkGJmt6mzbDxNx0R0k4LowoqZGDrQ8/7s992Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.40a34e35.0_1620863908645_0.5840714922913623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.1be14d2c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/fab":"=12.0.0-canary.a23ecb682.0","@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-icon":"0.22.0-canary.1be14d2c.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xiKnDkDPjp172Aa3Pg6YGMyMs9jmJemmyloLEc6Ao3Z7R2H4yKHvutu9A/e3FiKRXg077Dkpm4xm0NtvxDb/HA==","shasum":"f866e521134d048e202b50634258b04991963826","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.1be14d2c.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbFCRA9TVsSAnZWagAAnscP/0jw/GhhfVMod5nsPn/B\nT2l9cRbUHfvrHvV8CfwGxfsvr++jj0y9nSkyzNB/IbmVpgLfI5b35Q/OCo44\nxpjY4eqoEBimQeLENMAHshHaIWTiWFDxz/G1tl3e8Ym9pblN7HAC5HaNbcc0\nrM9TaoavpH4zDlDXIopXkB3kXPRT/YT24ReMGwY3f0cCN5PYFe7db1MGO9iw\nyEuJJQvaV8sbQXlKnzpRv3SH10H9wUo60dmNc6MMuuh480kJdEKleXxpkn+P\ny4agY0hAfo5QmJd4m1jDsfcWqiRm7ihUUY+quPycJDOaStX8pKAX/iLtuhXd\nHlgI8o2gXNqKgpIN/ATbRcVQAPVbWSLL9ROwYwj0lCgXWKdM0cVQjKLAWCb4\njQYvM2vxcLEoNkhcV0RAjAAaX1QfApzxMavSBToz2ZUMhrDovwCZpiodc3U0\n4IbgY+eY+OMgA5F2vOwBOwVGitqgCFPlVpHHU/ajCRtljNXz/MYKY2mRGamX\nV2cr9siw9fNJQDCdiClnTHueL+uZLmtYenqk2C137Kpdo0fGMWw2S9ujsMGC\nJvN6OOxjy5aQffE3JQMnIIySr+u1NAhxNCAK9z5VIMxXCsFVOQsgA+8XYQi6\nQjAIokSimZZRJRC32Kwmp3jv1RgCcMuvdd01+mHqpbMYonV2lmBPvm662iVX\n8pCo\r\n=tWxZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEWybTCQgvl+6Uu3hbhcQc+F5j4VGCJ7pt1nBS2tK9VAiBWHmUOxvkBV0IJUZ35D+L7aBsv2OJ0GG9TzvPz1BGHyg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.1be14d2c.0_1620928197277_0.03273650819749174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.87dbd64f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/fab":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-icon":"0.22.0-canary.87dbd64f.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=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-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eZLIME7Krq82Q/kVvJRqfG3c0FRANcSbpIR8Z3lvpPwHdU5BjmG/WYsKZmom56R2s+zLXHuYntBnPzecxa/h6w==","shasum":"a87117d66e728b31a25c80badae0509412ccf2d5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.87dbd64f.0.tgz","fileCount":16,"unpackedSize":74958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuR4CRA9TVsSAnZWagAA9FwQAKD5z77zo2Ghph5gkNEK\nwGdULRDSGWCpXkRjCKOuH9JXLNsd5QekZdelhvG1ESCz8oyjHN/tSQlBGSKV\nXKdru5g0Y1jMe6/cXOAxmRLokGQEvoEkpjWWUFtD2t1lwhaYyjIH5qNLyBwJ\nstCCXTe1KAmZZ/B/hW2hVWyQ0KO+bZPazIgmcg6rlpLdw/spY+EpdV98x/eI\n3phcfw8ejUaM/bLHKulgWjZwDgk+JqURKnz1OsRJILugtEGSeSPR8NupKfHw\nQl6ZtRFTRm+KR7KLOtJP4QYO7l7lj4a/6ik1jDfL+MIvxgWSq1sONGWXVO3u\n3sSOP83g7LlanFkOmE2gTGF94kS7vA227dqCHP3XGsVnz1Gt81RN3aVTZWhV\nes/8up7q4Vp7uczmihvMt58HNFvIiW5m8EYU2EqvklJOAt/5rUddhkzXMk0r\n+uk14w0ujuw+VjQjXE3BGVg3YwC/meQnIKFpVIlNQKp1/HcD8Sk7ZKdNGiLJ\nJItphvHPimUsNCqk0zp4FmgmDfwLDYOFXnCLAl73SxB0RxrWqZgSU0iwbNnq\nWiO6hMcfTNkAlDoc62ae6jeFNAh/4w5LHlMISn0wCW7js/4LkvVVf5kkZu3D\nX1dF3Y2lYRILku26uzCcoMZ/bYrtXkhw0qbrOM3WtU7f5DGhj9HEm54Eu/U/\nIDZ7\r\n=I6uG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1q4ccPap3Mw3J6CCmx1MHUCMaUV0Ikob7N2hRMW1zoAiEA6Lj0Jzlqhnk0cT0didkTY+ad9i73sQUr4JxatkRk320="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.87dbd64f.0_1621025912254_0.23251027960499782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.c452e4da.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.c452e4da.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/fab":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-icon":"0.22.0-canary.c452e4da.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DhrKeULM4AfYtkTY/pqEH5dnVj1R0jEeJqOc8MuBedBTISXPQ3F61C7M5fPaCeitJ8J8KbrY7tdFwspge31kZg==","shasum":"2165be8556bfb78d6f7e4586af0476166594ad79","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.c452e4da.0.tgz","fileCount":19,"unpackedSize":99087,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovz3CRA9TVsSAnZWagAAziYP/jGZ+I5QUwFicBCNyXPG\n4cVAH1350YySatZyfqwB71CqVjLoHmC9g7ZJHUsr9idYG+3/yK06rYRQS5ZA\n3s47FHhwe9QblGpJJ8aXBWFBAU7/TlNeREnrVqOtvo+Y5bd+Um1crjJ0MDbq\nK2n2ilLp+j/Gkc/DNzP0zeY4a0Z96ScL7nu6RlIf4UueN/Yf+jXRHLfYNgOz\nVZs9Krc7SYN3sebll388aF54NLRZB6RrEYAsFlzcpMAl6GGAx3JIGtdN1qsv\nnhdM1LLwFBBixXGQj8vfp6HBpBMMCtAJqM2pfeeihkB53p2Vggc00PLMSNvY\nDPI0O0wtznuL+wXY18JjYZuTQEOiG5q56P4Vnnl9kqid3H2My8d6X9qvbTBq\nA5rnrgeZUhGO3TETm7XkxUA5jL+v3Ci0exRHESCXdB2Q0xM4XLBbwj1M5VGD\nAiqFolFSUO1YNPOXc/2Gv8eSYbjhmfm3hopS8w2Q5yCig7w8SNh4VKgpiOAz\nm2lW2c1swcNjNr9WJhMhCw+/RDF8ekf91JC8M66krAuRMadKxoaGsplI/LnQ\njBrhsYPfSScB+L+AYgdRDfC23altmxqvnwVe5lM3K+1adX716bglxXvY5j2r\n0sylvaRUD+8lQhrnLXNyyy9jBMxBW6lu1G8grq9A4ol933h7+/E4KTg+9KTh\naiPf\r\n=beyp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBR1ntBOFrTAGk2SQOW/wkniCZOVotStBN1cy998u/9JAiBxsz6+cmQdMOKfdZri/6K4LNXpIp5KjBY4ZtK3jC4AGg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.c452e4da.0_1621294327434_0.12250679479699178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.2212691a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.2212691a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/fab":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-icon":"0.22.0-canary.2212691a.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vKAgsZoCWWsErTSwXKb/urTnqwIMgxh/SOuEc5bUZ2Hjr99lTpMqvI5KgWOakvI3fWdGrkgM58iHZ3mBy3avCQ==","shasum":"7d82b27f7c3d7ce5584263943742524ff192a813","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.2212691a.0.tgz","fileCount":19,"unpackedSize":94406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHNCRA9TVsSAnZWagAAglEP/jO/22dY5CsrRWa4O+tW\n/buF0oNOR4AaGBFSiEBelHakpCGTVkX2ztTp3KU7Xk6JQV8OHujbMfj46psT\nclipxc7EjotAPxeUz/WNxqz6vlj7ITO50T0VQScPXpcL/WrvYhspg2qYlf5x\nfGFCMlB+aDaHZbPSOcj+kxRSolqBDxDn1vMwsXH264SnN5zDzvQjJEsYNbmt\nOrJxevuq5FQycQeY2yYB5Y+uwL8JY2suC0FpCI2nYBMyLsAqaVOsuJ+Lg0d0\n33le1InU94XFv6I1pmGwTQHCwIvdIgqnDaRQoqvHLkjnqSxsjnFWewBilM38\nUsfcCzJ5xFUo9pztyKO7hZ8RzSkVi4w98RMpfziLphVZznISjBBNWlIA8Fm8\nacLpiunp5848/43bV5P2Cph3YngPWt8NTd/kr3K5M4/VDXIgOt9GBJH12Y+8\nAmWy4s7eYIWSjV2PQkU14mL/+gLH6KbjT8rYkAYJ3TJgZmn5Vh9eTv3K4sfy\nVctKH9RN1i+bE/5/6jHPeOBlXXWDVY0wap12ilisoo/2vAgPk35H+8pwS4r2\nAq+sIQJHEx77RCgWMek3beu5j9pfWLhOPIAN87kZSxIJrfDGIgg9xAonBxZq\nQB+NHELoh+QISFY/Zv9JcelKzzq/+NApbu0GJ9JcL5urcZyWQFBnYUfVnil3\n2qgU\r\n=FD/a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbVvyNPjUxdoqQ0KGhe9qqOhx7ed+ls6nDYsG761FhSAiEA1tiJqkLb07QjPgwrlEZBSYiPNWASmHDunXEu0d4nh6Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.2212691a.0_1621295564780_0.09379594946300363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.f748ff2f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.f748ff2f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/fab":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-icon":"0.22.0-canary.f748ff2f.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QLp4NF5oCZTZboAdbkzGehWUrGI53pKGvzPuqlmbwRo1xwYFS2pbFKIxjFmvqOsQsJRJVfFAigqxE7fHqeMhXA==","shasum":"67ae21620799c7192002efa3d61f618a56772872","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.f748ff2f.0.tgz","fileCount":19,"unpackedSize":94410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjLCRA9TVsSAnZWagAA2gkQAJ9Nbk7EWWGAUIHzEnQZ\nuZwUmoh8I3vt3cZ7SsQBQwr55iou6ItWF7Zcowc2rRS2G4NV4e7BgYV02jiM\nUsP3S4MHGc50Suy6yzhPhibAG6KDQfS4hku3Hqg+OWUoc37lEABLEbqnq4kw\nj/iN7DpAFlShs+3xbopJpM5c8o2nsN4lCTzYeUOuZYEaWjuG3zt3t8lCnQcR\nU4fyQI+PXKR2Qdr4Effz6p46erElKfzjn9CHlGaDljzl3+KXiJ2w2Jb13syZ\nh+hJmOeE9ElOdklgfaMieS5wyJSsgJfbsfsn1zmIBPtLfIQwk+m75b8UxOWd\n/wKbAbMWcM79noL0Fn2mEhSsN6JLDr0sQ9SlRoaCpOrTuD6eZljjx2SskzeP\nhr0dgDuFYtrV7pl5u5xS70dZCxtuuBZ0LIO/gldeWxCpYrv4b7PKdhn+YNty\netlo7fP+1w/gbYSDTMhm4PM858dmZ14Z/awKhacP0E0YAnLEm3ajfXkMv986\nQ+pRhdnn95AHh1+yeqUohnMf8+VDZiTVUdCNrQUhlZJiV48fcUgytffjfQDk\ndPCsZDPO9IYL/JfO2+INPvZWKhN93AidskKdcBlb2JlkuXWpEbtdHtjEfom6\n/cps79CVKm7Xr/UqO0DqJKaujGne5622vK9mPf6/adzafuw+IWM8KuP6vC9G\nwa9y\r\n=TKhd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu1gE0I559G9n7rncCDrKb/NNaV4t2SgHH7unXqAZ4/AIgFrNoRSjtTermDifY8nrULdqrmxH5QEJ39ta+fMZu7nw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.f748ff2f.0_1621297354812_0.9752680420781081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.cc04657a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.cc04657a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/fab":"=12.0.0-canary.1a8d06483.0","@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-icon":"0.22.0-canary.cc04657a.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/rtl":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VR1xGp+VaIcysklG6jXP2rky3iTTbI06AvWa3KYevlpwm/sfnY5N4onUpeckAzIVvKUKM9JO/Yx+snJCUCAY5w==","shasum":"a3307c19a5c432c20da1029451a4dc97a219aa46","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.cc04657a.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZ+CRA9TVsSAnZWagAAmyIP/Agpj1NbJagJl4FgwJWF\ncOd9Tln2i8idJ9iuTIMomWaqYWvg8fGnnHxxxLsJ2tFasL6zgK2IkAYhvTgV\nb3jxLn4g5BNoSYhV3W9KZ5afwyo1g4zL5hDIm0P95ETFIdR8lM21gGuZ+0JO\nPOYNGXNVSyHfodUACoUQt3/82nC7fb12Fithl2M1hm4UPTxZqKqWhHKxtLWl\nVrf/dti5rMMoh3VnglavJuHqyCwVGX2TSBT6frRKuLKsQAex3NvT3ggD7w8y\ncELpykmL2a4MZQCAA6dkfRcJ6D+hzz3mGPM4A7HwHkarYAWbpRS+5djhop2o\nTiFsFW97O32wbphUPSHR8935XmnitVbZ0fjftRdJywO7HCukXF6mvlSqBx+R\nFJBFM6VR2l5Omnw0ba3mJGM7rU2yzDAUw7StLLDEpivmBZGGOrOBaFK5VELi\ntTaDuOAkriArljcIJ6mC6bv0TpoSQFH9Y4NGaVEeNE9dp4N2XqCc692/bvwW\nuL/XuRFl5l8fKOfxc9lgZB5enWQA6/u2hRo2FHGUocNziqWrDqIkMlxMOLhj\nX0X5S7UI6eMKgobAOBuSLe+z8CjDs0l1QUeI9pEGJPbotwz/kpqyUDrnq+YS\n6EhpDg/F6AHWaAaX6y2uTwQBurc4Gwcjrc33b/Yhqn/jrTRsiNs8XzxGAUEP\nL91S\r\n=iwaO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrgxlNbidjM6m8rzmWLOVa4FOMgEg0GAZb4cf1iKPQAQIgbYpx550wTzYwqTVQTJbu5HpBAKcpGS69ZlBQBY9xKuc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.cc04657a.0_1621300862230_0.6193834923240997"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.3a3114fa.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.3a3114fa.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-icon":"0.22.0-canary.3a3114fa.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zfHUrBKNkf1akaCTfaWEbiPDbbpgTAT4Ce/KqcVyQ/Ejw5TW+/PQ7y4euVqbP+EGgrS42loykTH5xBqUqRdrmQ==","shasum":"17c49908fcc9935f2846af1ed1bef9e36117d6e9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.3a3114fa.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHkCRA9TVsSAnZWagAAQm0P/0ceCiu9YlTwD7FiJjpO\nLIcIQ8q/MAUBQcJBg4FC9ppmHWex9k13KgWGFrlx2O4QlzSNnGDZRT8WsPrb\nOxxS+Xt2AQ7yZndkMQTMQT8Yclj3MInIiJU9p/vBD6B5IAoeU73iUCvydsUY\nUxINMH7alwr4dDVcdu2Y4X1s5mv7s6HREA7iPHwQ8HSFacCI5jptIqGIVMlD\nd2WWNlfn1oAqAGoV++Za5zYZrc1/6uNJRw7GmtJ7U0v5TCUdrE9Vl7I/end8\nQLsuzaxr8Uj0C95vheu8Tsp2WOWEuHHrMe5UQbST8IG4NgMpngcZCiFCK/ux\nEHd+ajQXzSLys1cXV1IKez5FkTXrlAJXf+/GV+a+BSWzumqrh+iG39FVUmv6\njcCzzW2TZmI9Zd+xzzSPx1ZXoQasipjULRuhLzeBDV1Zg0uw4YYsCtRDdyDu\nm+7gps0LuddKDZUStL0lL2IHniHEZ2cJ4qH1T28aRhYw1TtNrGjL8VF95QJ2\ntE1NKetEwaAru5daYNVGfthE+IrFTdiaNSUD7N1RPcOQm/NcdUe/fZ/CgZHj\nlv/C9f6TJ3xWscux7UcOTu/MSKtkPTKhdZg08ehsrUy6DwgX85Bqe0B09AG7\ngnqy4WRvfzbw068YXJTWiEOUjRMsH/uArSf2XXo0lMcX1EZA9m3btGMKCU5u\nnjJT\r\n=Mqti\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXL9mwv0gk35U3ch/I7jMc/V8ZbUM2QfwCvIM4bwdXcAiEAjUmNmRgE5yUf4UxK4iOuxEz3DnT1Ip2+p/iNNNW8tsg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.3a3114fa.0_1621467619616_0.336520508451859"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.b46bdf83.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.b46bdf83.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-icon":"0.22.0-canary.b46bdf83.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QyQ7Qlpii9Tl/lSyThKGRcvP5qIm+bgbuRuxkCfMATXuzfzWcIPAizfr4xqaIp66QHrEiZ2aJOPEe4qx2Ys8vg==","shasum":"55ebacc51c69124d0872c467880590c480470f76","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.b46bdf83.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCLCRA9TVsSAnZWagAA5kgP/0scmkJ8ENpsU3RFmSUu\ngzjgzmzesuJz67tLJrWA9B37IXstPk+cM4fn8tJlNkr+ygexA+sC1I0qiImD\nZ2HWqCxkf8SY8ylkaHBBXFFD4cxL7XolUcU9G3w7bH43IVMV6Voz4yUjg206\n1jVYjSjJSA4e+3OemSAFrcw7nj98Xlz6xXSJfU3oudpSK2fXlxCNDV5r+Ol3\nl77lJOfVE+QyIpBVjmRl50EWVB7ax4Q7lJUKAaLFa9HKhzCgAvbQgHyLzWF0\ng8vHdFVwgcA8yLZl/x3QsQHKNkupANz0Ds112ploHNk+3PvMwFHePBx1YbOP\n8zEo8yUsLfhuQf58fBL0UvfzaW3k7PXOh4ZbDtta+jSP0mA9F1EPX1Bv5tDj\norka9FvNka6g0oI6feOgFZazaLRHdfMzalPalWtqAyxYHXQpUxqR6jxgeepM\nVrSjm/uVgapxKcFfBHyK+61z98ZrDdSGLqx/b7hH0cV3vq2dQVw37hFCJs5c\n0Wm4nHnw1L6bhRTWDcvxod+phmFoUj/P8Sq46E4yU17xKZMoZQoKN0V9bqYT\ncabva6r2Bneu9C9iJh0ApqtWagOlV3yDf29j6g3LQ19HFp5ifgIJEuSnUejU\niXm5UCDscO3vJbFzZIlPFkHQwh4SAgfhlu0RmD47nrixlNLYgCYRfGPhgxVu\nCOKS\r\n=2KfA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO2b4SzosATCrtlsY+LyzBMK30dNIa/R6DEhITm1x4PwIgY7+lqxWNwvosziteXI2rEwGB/lOsydIRyXdGWCuhfIw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.b46bdf83.0_1621475466575_0.28644039013104394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.b401a081.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.b401a081.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-icon":"0.22.0-canary.b401a081.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yS9sM7DcjL73FJ93iMtxZ1Wd9oEw6EoC6BTEXGy94PwETvccjkHG9KDq7mcXcZwb/sI+bmM0+OG6MoBmVUC/Uw==","shasum":"d39c9be0ac6c2dcb3f1350a23dc94958fffd072f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.b401a081.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDZCRA9TVsSAnZWagAAC5kQAJaxvjKOyZHUuNDFSwdE\nQcdbtJO+0xExbajB+9Cs0ANnfd3NkgDpbuY+1JocLM22SjfbkxNy+VB1GLvS\nIAK7q8TnDtKqoDxHcoOk+PNLZkOv8wY390kLLpY6WyYySFRavjh9Jbrw7mMj\nBa6rKL53vfqTLJEhTceWIWrBd25C5uouNhUGAFACbB+A8R+QdYHZGu1GRTZa\nNxVwBbzFEjf2d47NAI9vuNvIwGje+4Af59m5/XF0aCx5g1wA31XdbJqjkfEH\nfn86DkenPCf0P2iq6+vlXjrcQ3mTSCa9ku/PXsvFbKjhqOKy6Kyn2nlR82cK\nkBn0Bpld7DYPs85RTxhhEmS96RutqhC/3HYev6WXFiN1Zv2dIWDkYDEvOfZ9\n6idj1S47mkCHDPR+wohSKkegRlLgak5S/qmSI4WQgrhgfUbGOX8Nl/ZZfs4V\nyvk7oJMxpo2MF5wpuXoH+uN32RF/ZFYH265U3TsqcSmfdikiNDTJpzI4pjiZ\nG6GGp0+q59fTTeWDBUfwdjABdLUYjvb6ETYvsgJ0g1QTJROsh/1u05FKAFFX\nCeP0PMzOOcUWziUspUs2q5LuXwVBSnqjZAIhXwqNxXLCZvQLks5mYspVisI6\nWxQyzSSoYPLxJkjc6L+MIXAb0keM3rxyxthxYvN3DWMRW9g3r1GXwr1hOr6Z\nQpN3\r\n=52/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHStzngdL0KDwNHI2qMXCPYCITriYMERls5O5LwNv7nNAiBtLx2/EqYcxJTzCyvazdi6zf4tyzJzptMH78ZMA2jTHA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.b401a081.0_1621639385242_0.07314410147954464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.012c8dc0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.012c8dc0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-icon":"0.22.0-canary.012c8dc0.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Q7h740JGfPIv00LThtRyyQZpncIGqDRQpih+yZ55ucibqifNZ6FIKp9K+ByNX00Wk21TsxgT4XsYzRpYjCGK4A==","shasum":"98b89bf4ac5682d5586ad98b089f8906cd9990c9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.012c8dc0.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1fCRA9TVsSAnZWagAA+5gQAJC5RGRx5k75xxysqdx6\ngazqQIJJE2yBWS8Tp+osOcrRCOk3bZAQ8XzWSa7TgfoI+uUoWw5iuun/VLQz\nOBm1yoC0IqORuOt56SDt4ZqBcGy4Vt/B4ekUvoyZwHDmF/im7dvYbhUa8g4I\nTQGNEDwDLrjts6eTvVI1yYmxocIaIpVF96k7vpwJyKNv/o3gadVMUVpyTEUe\nUqC1FjoSmlLBglTR6f7QqvEbtkZo7lTAxXxs0D2vMKKB6k9e+9hvNM5Z3tmF\nSueYXQ85GsKy9TnlXAuQ7z3B2qDtf24dqiDJvLWAD7umGAWl7dHCdjsgenar\nvwuzA2dMN1eTY1au+hcWSDOl8Y5LHg6SLJuqEakn84T/d8LSNbEZuQbTcWGh\nsLiCQEDSI4zx67yFqH0PLJnR2mG5WdDlWLYe0YI1+FQhiW3piqec31H0V+FK\nxegL4oGvHvxK5/dtmtoJ15QypEhzNBRXghjZL2DCa7B7joS+H858V8LixVNr\n0UVyKz/1A74giI6w1pCjvQEyOK3H2RdCHPwlAFpmFhWLlloyIIdQw5Z/0Bn6\nCBVKt7knn/cdVZBvd+K6t2AG21FrRVZYIBrYChgZhItT3ZdIt2Ou4OBLbu5v\n9UvPiPmCUPvAwf+FEqeVXkhnDdAWaQi261PqrcT09u/Vn4vK9Ol3W5mn+50R\nQqnE\r\n=3fKP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJuwrmjJLSEOafTmZ5L1EoLAQrMPh6sOBtVC9i1+e5+QIhALVhhTKvCNZIdJ0IwYFmJoNE8lnu0RthnCxa9dLXGOLf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.012c8dc0.0_1621642591422_0.25819958849775615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.e01a1731.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.e01a1731.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-icon":"0.22.0-canary.e01a1731.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Bd38j3oy8SdJR8cuWo+ApXVN5KDIa+bSS7EC7g3//BlpraALjWx1D9mzA9ZmnqxKdGGzwEwYD06DFT6JVUpf/Q==","shasum":"9aa6c9e494b209346c3ce21995278a4d263c4b2a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.e01a1731.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84vCRA9TVsSAnZWagAAwf4P/1HOs2uS8hCQUJAvMZwu\nrYNTZ/hDDXXVzJAAySa97D9/54PVaNRW9jyjnYCL1Y0elXczn/wqhm8Ii41i\njParuOPko7vev575tMd79skn9wDy/MS3pL/0dErGC4WdRb2V7z7rpnD2AYqr\nblSZ1aP6TQPY82XgRK+E9DQSmmA5/d7tVOqmA8Pa0e/LGkrM6WTtBlhP7Dam\nEjAEqC3Lx5B6dyRbDiRt1VVmQnCd2zVjLUAY1KkuBiLlovA1IMwsJHXC7ECd\nShpvIvwjyOCkn6yT68ZHXixwqGRz2cR9/OV6auC66Fdd2VP7hhk3erPqsWa2\nWyJxUxfRGjh6+jNswxdAuPqjxjvZ6ArHoghn0Lp6ksxPN9LoM2fFFOOSD3GT\nwSd4nYeUhDtO6mhCA7Ylrxf+vDUXehBhhbBQfUz2uHe3NRf7o+4jJUe0zQJs\nIT83++Y0xen6935Pqx4329ug1dGgVJrgbU/qM1W0ALSwbY4ugUkcAcr8z6dw\n7UDXZwhpWv/KOvfGu069J1qrqldps+Pgr7nwtRipdwSDf0itlSbBEjXz9PSl\nolyF2/1KnnCzdRDKKxPx8rKF8QLYtlM6RPtEW257vVIYrvJrm6uCm8ZpZ+1d\n02Z2hbstq34p6RitFOTmIy5lUm1SmRd4UTDZJc6QHCUJEdveHJU+EqICnrmB\nqfMs\r\n=vqvJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvyKiOKTGM2v8nJen2Dn9zCKA4CmiJZh4sKaaCfXrVxAiEAsvC8/1sp2iRzgFoSdbaogK8eKNXspVMLRDVlZbVhpeg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.e01a1731.0_1621872175157_0.6020823497981656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.59174b9f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.59174b9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-icon":"0.22.0-canary.59174b9f.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IE7oLrGApfuz1UWTmMvKpUw5jTdnF1flyhPz8w1js75FSnZQRvFUyYx6oREbR2brO1pnoGgCNq7/vSp2bm//DQ==","shasum":"bbae1808768d885069a7ea753b6c74b4688d7765","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.59174b9f.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTuuCRA9TVsSAnZWagAA/yQQAJSEUZvZnFcTT4uGN0d4\nd4Ff4NJX8S2LUTSndzkfPZrD/HiZWzY6wOPoybXywNnty7EvJE8eNdQXhEpo\nOM5c896YtfAeOLbcTnBz63lP2jvZ/CGdfbpXyood8gXCl9TxCq/y/sTzChDQ\nTAt3d2yvVyMmmHaicuSatluj4/DtCAlLNC4jweV232xAO6joNAfgBXfCX2W6\nV2MWWOF0f7AG8WqpK1gNI2a4Pgr+9yUMuhKXZTET9AYU9Sxz9QJmx6C3YL8Z\n5ubxwC3WeQnA7tprd5rsoFkBVlZARQvOfA0QrasdzML28wPyvIzB1iR+e4TG\nf8yXGu6b2QcTDj5JyOfvDmwZ/oDP0z+4lGYuYnJZr7wUkKokeB6rMfZTDMhx\nYHevy6+UWTvhJKrBczzcNwqFVtUpoBHKkThZbxx3u1Wi2tzlRSyVx2qMZtIU\nDjCpWOfpU7sKvgFlfpK+e4pUFkO8q3ElQUvj5xzubJO+iP1OR1FKO3aySoe6\no8+b9EbKwkr5Bn4zYc9CErmZBmIHL9wLphT01mLd8caF3nmlOLwYhcGh5QHT\n5Rj4OQxyNZXbcNItEF3CsuV27CKbiLZ47bVOStLIUTpOkzFlfY4EgcGCZAk+\n8aP6hxC1todz1fd0/e75Tno679E2I6aw+YZK+E66Opz+Ppw18pvh/sTrSTzf\n4P3O\r\n=Io8M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvrZtBvCtzt+bCwTA9tZDaFQEb1Xpd/kwa28JgzEw9HQIgDp8DD0pNM/MRK9HtwuukK/7lpz/xnwNilOhHgijBcio="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.59174b9f.0_1621965741762_0.8737051313832913"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.c96cb2e0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.c96cb2e0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-icon":"0.22.0-canary.c96cb2e0.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VzZLJSq1FckoRY1VFpwZ3wRXPiovjUmzdZY4e8k0Nc98qIbUsqQn+/RRLkv5Wl8HNLUjnDDb2UEA+8j+AjFo6w==","shasum":"5990c13e5b91426cc8559f13cf46658f050e4cc4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.c96cb2e0.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwcCRA9TVsSAnZWagAAL70P/RJ/wSZoRwI6DiA507EN\nDCSfBsFwRHEtUBpxvDCRcR4hsnw9m12MUgaS0qnIQzfKLhm9Fy+aGY6ASKgc\na0qtVEnlj6uzqW0SPiwbR50WRJOGnIk8BwuQf4gKcbmuD+25kTa1nposePbf\nee81wZRfnlLBPNSc5yExwDKzGZRGIiVRChUQ2uc2yD1gdPRIJC8UQNmnifz5\nXidngCRZCigod3Fh0si13glh4+ntWeSrYUFU5JN8TGrRZdjEcIGrnV9eaiLx\nmVgTI05gmRN3ioygOeDuhkHiS0nvRSGBNLjUdsbIjMOyBc/jkr6YKjMER1VK\n1KlgRLiVsxeAVJ2vUD/vkPEM/S74pod4gubC1fXYOUM7GbjgyZiQ+1/V4/iS\nyZSuNykUftEFjk738ssMBEwV/KtoM999t4Xc9E2DLcFE+ByUq1YR8je5WQgH\n41E0wCScQlPPCgvnF+dG85jX6SIzVpFkQX0vzeb8QIafLbxeY1IcRu4Zlv6W\noJA50zSnsuWMG+gZdAqb0p7vzgt+aXvBo6otdyRBgtW1hbyhA69oYI4U6kPb\neyh5whRUEz9mpjfwusOMZABiPtWXsJm2ti+sCTuZgBYP8yQL02K0FvdN9Jam\nM/mRNZJ0tlT7PNMFaiQC+lmKY3D3Ga9P0r2dXDKkr2ha3VApjiBPZlbckPy3\n4ca/\r\n=YTeR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCwYtTD0k1idlLe7iTng+P0+xDAXsWMzFMqbkL+ZVPkwIhANbKn+f8m29Gvk/0ivhQaGIvJ9DfvtVvTYa47W2C9MYp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.c96cb2e0.0_1621969948280_0.037266612710296965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.b9b0e330.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.b9b0e330.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-icon":"0.22.0-canary.b9b0e330.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x95u7muM2xDxeMQnXftY2l1b6zYbW0/kBAuQsG5KxpO2wyw9wNmPM3XbbrZmNmYZNF2kyoI2HaJVeL9yb/misQ==","shasum":"200b3561428567c7c80317ce5363a2b15ec20105","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.b9b0e330.0.tgz","fileCount":16,"unpackedSize":69352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVwCRA9TVsSAnZWagAAXlwP/1xzs57ZLII5NUgF2v8G\nNeCyCHbhxx9OisXuISbdFWQY6ObTbTGSuzAJ0SDJMHN3QP/424VS31CS7FYK\n2qbE3xEmeRS+cxd0YrsVIKjrqciPS8A9c5Imff8mGfs6eKdecP8xh0cEY1sT\npmKVQwd03Pe/qfzZucHTKtrvZTAt7EyPviSfiO2q4yGD++YN9QFmH0IcROdx\nBklZHdWpXs6KCuv71acfJ3l65myBpRtre3hhzvqUc4PvpTsPWLtDWbMuvnWV\ncAr78dSDwP+HZKtI1Hjrue592EaF5NWreAymfQIU9iMZvh1qALYtvsCT6b09\n0TLavtFj1dkHwXDPnrIb2ABKo7xWvrW3GggU6/O+2smNI2bafr/hbzb6TDMB\ndHrCcP7Oql4zHQfHC+1EdsxaevATmRuaIP7I8v5UQtRiC9HgkUoFqcfXG+TU\nk9N7Btu/En+k2jPNa5fxy2az4oCrFyaSWjNj3Y+67wKEaF3712Xm8yepJY7r\n/WgcxmJZfQK/pjBrZa80w3uRw6MGv3rXqPomr1lxeVEsVRJxmXdUwTKq83rU\ni8bnOvh0qvZlekzn2kEnstLxLFZ6NDjFGUbeX1d2wk86SOUMKhhW2wEG2Q/U\nGPmu4e5MdGd6otEzQF8HaBpbGtqORazR2loTW/hOVRdYh8kHTdiW3DEmNwCh\nyRfc\r\n=pQye\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjR5o8SM6Sa4s4DlVAw5ObCL72vL31LSazDqcRnbvj/wIhAPIu/IeNMQFkDHrhayo6dnyqxqCZGHtnOUIry5+HtPBH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.b9b0e330.0_1621976431235_0.19271484709152742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.ea2a8063.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.ea2a8063.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/fab":"=12.0.0-canary.4bb5eea2b.0","@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-icon":"0.22.0-canary.ea2a8063.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/rtl":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3ERJV2WHLNbsbSOXO9HAZhKfMRgpUOmm8A4x0O5ueBBj77ChgC7E2pYG/1LHofPVfPGGxBmtHFCqwdQ+R9eBEg==","shasum":"d9dc4cb26b0eba15ba982f0457b89cdb782ed483","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.ea2a8063.0.tgz","fileCount":16,"unpackedSize":69368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWabCRA9TVsSAnZWagAA45sP/0LAGkp4xqZSg/0nApqx\n2gHYAZEWbe3H+c2qpKXy7qQqXurCgpFK7X6Oo/zXExz9NK5AIbWnpuoJ/qDc\nkcd76XuaLxjKNu4x8pBFKXY/eq/KVCJXpaFZq6p1f1Sh4VQxAvjA9cIwjDJN\nuSgZ49M4LtZ7uMqebZzSuqro1Cc/NY5bRhjDCo6d0lrdgzt/XVmhNyzSwVCp\nY1F9DHLHF8ng5Q5FHOlfRL2oYZNFl41uN4AXI0TWTw0jyhYL0qv6QkUk/UsK\nk+rPP6fxwLaVmuzTYY1nEWamaHwF4mqKO3+I7bt3KvQMV4qPq6Qk64YvE8lY\ndzqp8z3XaGyvc/UQz0zy9mM9tvVLpsPO9Rm1QzR6FSAYE0GXesv5FkNTQBf8\nGhp00ax6XR67CKr3E5mjnvGVt/vzD8skEno8iX4o2rt/q2FHk1ek6YvQQzyy\n+g8QdJT8oV9m3ieoYw27LBv5fdWHPySxtZ5OKwKIzTnfDOyspyQNFPawARwU\nktN++PNep33w3g3IzEW+oB1qJQLDvWdPQo0LX36nJ2gSW41ypc6OrVJASTx2\npt4j9UTSwxKVcWm7hhbvZ7/OnzSJykadNqp6kh8C+nmnXMgczOWJagMuit5d\nV4JnCmLNJHlkU5wNPuguD9zBIb5fSTdqOagQxkud6358GCN+shf0EZTHpd76\nUiO3\r\n=3mhL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfg5EXoxYdttXI03bIX0b1DRHjx93V1ORTZIKqffkuBAiBUh0oUCYSds+YdqgVraNyJlXleQPOtzbHfdnbvY52iZw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.ea2a8063.0_1621976731242_0.34270414939674065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.60cd9178.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.60cd9178.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.fadab3372.0","@material/elevation":"=12.0.0-canary.fadab3372.0","@material/fab":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-icon":"0.22.0-canary.60cd9178.0","@material/ripple":"=12.0.0-canary.fadab3372.0","@material/rtl":"=12.0.0-canary.fadab3372.0","@material/shape":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hhSX0obnkNBXUW5Hm+CsdejnR9AAvSIPpfSfw5L1+Hxc5j/uLbPAlglAM2/7kT15g63+zP9DZOFd0buuYl2eKg==","shasum":"6276066b5a24733b159579377869f85d4f572046","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.60cd9178.0.tgz","fileCount":16,"unpackedSize":69416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTBCRA9TVsSAnZWagAAANgP/1R+DJiDbkQ1JiwO+iVT\nRFf9oCG5AMZjV2VnuwvE9TFmGL85nGrM9TOJH5m4jmg9gd7tFvlFk3cZitbr\nd6/mIiKg5Ny2cVyDSmBRpg1SZnakrRwe/a12yz2FGNAIafNlYWJdkR1o8PHf\ngmaZy5BlKuOgtl3sDWae3bKa7G5KGEYjSKKOy8zHD8vhapk6wy4xmckWYZ7f\n/THN4+kmFrbisl0WqfpxZf+oRqQWW3J+H/4ilSmHu4WYTJIvj/q2pfQbvDEc\nOGrp2CbKt4LEMC9ONCdGlEc8kutvFqb+q3Hc/4kigaFVpp6vicUklmOXtOdG\nA06y5e/76AT6af5aglukMsETFeQ7t4jAcKRv15dKR8vHXIiGqzY161o9G07b\nCcri1AWrKgKic2mkxBNf0j/uTnVsgs17409t9D2Iyh96auXuNaXUkKDjPAA5\nccvCUHcsSeO8FEVyvdIDgB8igVpRGCVkOGN7ZYg4RM3L9YzG4orlZYCFYtH0\no01Dhl3xgbmXAXL7TuIdcHi0ZDu6CaBMJEo109ar69YUt4LmC5NTrYrCLAGQ\ngONj6QNehGRm07ixBu6maOFoeOab5gsPQ9V28c2d5LZ7MGk4DuRXg+hq0Qda\nqbr52qU4uVaBjnZ1z3H33axY5jTG6+nbOQIn6w6AL62hc7Vm8kUM3nfKdYWY\nXxF4\r\n=2OAW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD76EO8h22XowQgCv0tKSys4l4981atcKcJtIYwHQN8eQIgA+4jL07bxyL3Mtb6fWQCTc0vgaZE+lydMAFiDW0y+GY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.60cd9178.0_1621984449395_0.7914492886642339"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.2e2c75f2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.2e2c75f2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.fadab3372.0","@material/elevation":"=12.0.0-canary.fadab3372.0","@material/fab":"=12.0.0-canary.fadab3372.0","@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-icon":"0.22.0-canary.2e2c75f2.0","@material/ripple":"=12.0.0-canary.fadab3372.0","@material/rtl":"=12.0.0-canary.fadab3372.0","@material/shape":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1nYJNNY+cPqIzgzP4CwtT9MhMk3EG0uzVcOHPAVtsjRnF4JxSBAIvx2rdRif1509YODBBjUxXkgDwwGFIUqmZQ==","shasum":"530a41ca86a6a100271e677a626a6a699187e16e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.2e2c75f2.0.tgz","fileCount":16,"unpackedSize":69416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZIoCRA9TVsSAnZWagAATjYP/RBUBrJg1bov2gFWzAoW\nfkpcOOarfv0KtvNrQlVB8/IQ1nc6l9KiNc2zJPIDfKDefVLbsGV5pu76diqt\nI7YgktxG0bSbh8OCynZsNtz8/PoKxTBW9MVhPYTa4Qjeme0Hp0n+4+J/Clg+\nYB3M7V3qL5D0OSyKr7T+yLo+tCACHa+oYGyA+jaYbfFXuvKdj4ha1PfCZIMF\nA0Nl2YtAXNaUrAiAJw6kThdFR/x9qO23jRLaiSqeMbN3WRVAw5P9/GoAitOh\n/B6AJksXhkePUYA3jzyelqU0Gax06HRU8c6zz21v2hanulk+mXH5pU8fUu1y\nkyQwzApBJ35NKb+2O7WNoUCKR6Oc4WHZtTzOf0thK2jL2GWCLEahwIggfjah\nc7QSNho0nqj/ukGXMIXe3A/DmP2Bs3WD3O8PMW+H9BBfdSJoqkfu14MytYz+\ni9qJ1u/e+Ca2xm4tKEOCzgR8S5dtwnyunvvqdDyOEq1Wf8N6opWT4CbhO3F1\nzEQ9m6lbl8W3mdLOXvUwTQ2cuSJTa7lGhtaiMJ/Y2MIsXQRcSq+3H1bFUFdo\nuKpEMcbH1pDscfecWfkTP5s64YxuX+AN+VpbnXYp3zhTIoiyhbXL5DtrABqU\n4TVEsqsKTnviSeN66f8gWOnCMtPWcZfyTSURo5ADoLFCICjtQAzuqL0qCX2D\nz8AP\r\n=EoPp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDSXYbIcHUOFDz4KOVRMeMeiLvTXvkBRQ42oU+kExkAxAiAx6aDRC57DPTYcF+F9iLZYVJ1X2g7nxJOX8HV7QnyeTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.2e2c75f2.0_1621987880217_0.5408604921686413"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.b99c77d5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.b99c77d5.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/fab":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-icon":"0.22.0-canary.b99c77d5.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iJWTkvfplxmGmUWOSDJw6Sh8e+baZpu505P4Ay3jJxSimHQWSgMC13z5z3Rysk4x1qcSZJGay2uBg6VNsRjSnw==","shasum":"9e4e91a30493a9613fee47d189842a5c85b209f7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.b99c77d5.0.tgz","fileCount":16,"unpackedSize":69416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3XCRA9TVsSAnZWagAAEqsQAJJJ1DVQjL8kdx+DyfRI\nL7JZTx4x0KEjDzo0ksmfaH1C4Z6mqdhuQ2zFyoFkBWyVmM3KeuLojAtkLBac\nv2YulF59yfZARgroHE7kywQmfXfGZz4uQ9oA2EhPZIavbNQd7eWQfMjE2F/P\nWjPxzjA1CC1Y6c+WxaMGBDOmcbIfRKkQbaDz4RUKI/NpD7NAAtsE/ag4lv7b\nf/EJ9oqhi6jo6Lr3a+Ij9ln0H5Oj6GiCX7rpe7+VE5CS1PiaAP8M8FmT3gIC\nnRl9zWJPcE7ipVQZWNj8qKLnFmrJwUGWmxPe1mGFIXg21ArtWlH+VQJZcrsD\ndXgzkYXhEDc+LjgMmOjxnP9GF8usBKpSUbXf1aOD3KqcsqxyYFOFe4hyfO+p\naaweP6evwBg0raOFQ9z7aqJaD4n1VN12Q7bgqiSKnifWdtFOeTsxSl9oozek\nmGAlw0fzFRujcQPwRYx07KEtSCSuDkiqPhV/B407Fyp5aTgRHuYAu9/xmsEf\nLizm8h5n7ikALbXs3ak/g1R6deLxCduCApav3qmPEBQBCkruaEDxqGEX2I/8\nY+dNTeLZM+nIXNy0L5k2xL4s5VMnDJsn1668XtxJN8tJoBP+w09+uF8P9lBG\nP9KyNeIp7QOZSwW31QEgwBRyoiwIt5E5+ratPVJzxgmfJcYkMpSsEC8uslsT\nYP5a\r\n=BI6g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAzKdRE5byvrUTnl8Jhj06mE3QTEjjeVeSRk6UX4UyokAiEA7zPFqsBZ0cjfNwCQ1Ob9yvHHNw8JC7AYF/kMUD4u34Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.b99c77d5.0_1622056406051_0.3183882332406818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.0de82c12.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.0de82c12.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/fab":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-icon":"0.22.0-canary.0de82c12.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hvqOVKGsaRnLroJ3/jMWvuapLdc2bE+cViRXhZYVFwyc7W83qH3zLVFLtWb2w5ZKnRGBOm24+J7A2nbP93CLpw==","shasum":"7c6484867158f7b1cb8dd6ff8002fe9e2dbbb8b4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.0de82c12.0.tgz","fileCount":16,"unpackedSize":69416,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4hCRA9TVsSAnZWagAAwVEP/1rizUwKO4AqJ8tVz+9+\nfsrlWIeKUXbhoj0m6dolZBsI0z/wl6EvyckvFQGdngUPP/js6lQidYgMT/gz\ndlCM9DTJC2TQXLWPavO8XJWUUfHzQ/qdWAv/ktSCU3X+HLnc1nBlypUts7HO\nR9pcSxirJsDZTzLc1vJ3rFP060miDb3YZvNkHJ1e4Zd3KrUPv0Ba2IN5QsfP\n+HcMpGJlbWfceXzYu/w3lYH0gf9rjT9q6f7if2reZGRLbdqy6V7QmTA2Zu1a\nfHaaD184VyiAPGd8tUckOfGanr5AgmCLIegpPVFq9+wRHwzTs5xbrhMMitkO\nI3bjYjfkrH505eVGXb8AysnH9jd+WU4o2E0WcPH7SjaIqf0e4nrYY6jbKD+y\nzU2Wz8lmIfcKbaFv2vDq2hsCiP6cGXaoYtZouqF/UwSu6GH6P6EPk+2tD2ff\njLQS9XdYtqiv6/0y2yUZFdiXJZJEG8pOtZn7pdv/tjdy0F66EqzZllE/r9hA\n6tf8a07vZw63C9ubY4shxpUXKXsCNCLh6szQMkJc+1KDzjq0X8LdV9DYJ+7d\nu+HJnPFfol3lgtlEa3FyguZVvM25OO7LCyZZ3h0GXS7dBpl+2R7SXJ1GtjYz\nqYcTDkk/UZ/h9rLYQ4xrNMSkGtlKPJM7nIHb2jhzfuc6pzOc7ZlRdRun+Do9\nY66s\r\n=WoPj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcI4iYi0Edmvdp9yW8soWx0NMZ1CTx4xEX69zED4GSKAiBLZLXBlWzkTjR2ruanstpS3/nRKSfPMWTBlf39jcvKyw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.0de82c12.0_1622064673392_0.013220157759090245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.227a4614.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.227a4614.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/fab":"=12.0.0-canary.ec31ae1ed.0","@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-icon":"0.22.0-canary.227a4614.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/rtl":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R1jkMviu52ZMVBnRmADTYVfk+Nxs9Sm+oxELl0OiAkqrl3F7XDy21nAcbbLnGBC0L1TwIReoo2FtPraA6EgPXA==","shasum":"d798c6ee1367142d4e0d459f5cb46abce5233226","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.227a4614.0.tgz","fileCount":16,"unpackedSize":71402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LICRA9TVsSAnZWagAABkkP/ivC3mYg24eLbbydV9DI\nAbjl9VI4soE2iaQZlks28siSth30u2OsvlJGz1Nl0OjAMSGFhRACxuDPuAjW\nCjhpAhbEWNudf8uQwNLVlI2XpcDmEuaub9kfiSADvd4O1QM+v5RwDvhPgymk\n2Wss1XtTzxexzZv5UkP3SE0cVu7pIj/2PE+FSo5QmB1iZ1IBbehfwc4T/505\njaBfLTLEI1nTe4GqD4yjvfeSCD8OqtX9DDfxoDYpv3RCEpJ/gn8Gyvf+79eo\nAypEsGMxgIgC4E2Q6RqdYT1p+1i/Jh+mthfV3fgEs37r7apZyQ+fUzKo0iCZ\nOG2kXjCyIaby4+XBFo9jilrOeChpZ9jO5rze3x3nBqNagBLeCo9mBcwcDfKr\nMZAGYqPE+RHagcy6aZX11QVP90KOTEUZGJJbb12d68uR27YLwFoThpw6b2sp\njNRkQ2nK89X0r74rY2hFuUPWNLNU33vYuteSxD2ca9P/+6ovcigTfcSN/wCo\nq69iAjQWb3cI0FW8B+Q+lwnANxkRdA4UHFz8rpQZKDL2GQIzGuXBDV/9o8Ek\nPr6nprg8onn//bDTdl6TauKmdEaf+QKrso+JCyn9GhxnQbGFS8KeSuQPsJ5c\n/zoWg2OeS0rEt86QoXjVCP35a2AshXzVv3hmg4xYvh+dt06TAQh4/1UW3BCb\nkiFj\r\n=qPOM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOu4RCPrvqYZIWW2QKHFNQ9RlrZDYXhDPY4DKfFhoj5AiBEpsn+49U3p/jKL4HabaKi7HrXaKUzrU3bGZi9xoW+Xw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.227a4614.0_1622131399570_0.1230312778944258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.b3d21d31.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.b3d21d31.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.8530d3514.0","@material/elevation":"=12.0.0-canary.8530d3514.0","@material/fab":"=12.0.0-canary.8530d3514.0","@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-icon":"0.22.0-canary.b3d21d31.0","@material/ripple":"=12.0.0-canary.8530d3514.0","@material/rtl":"=12.0.0-canary.8530d3514.0","@material/shape":"=12.0.0-canary.8530d3514.0","@material/theme":"=12.0.0-canary.8530d3514.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SexZa1y5/UJ+XBndFIFNTt3fL3fYItLkkxQX4wuXhtyz0qFEcscFYh2i90ITUnB2AxtlBa8g5h7o0XpN9JemRA==","shasum":"38ba1f87b988557d370cdc9c7d8e617a0ab03cd7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.b3d21d31.0.tgz","fileCount":16,"unpackedSize":71384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jECRA9TVsSAnZWagAAweEQAI5EzKJp8ysulFbw6BmU\nnyYSEbyzHqSSxeLBrV78GEJP8Aqv+UGRZQgKtMo03lrPeY/YFLhqIYZSXlq9\nnIKhWEXcp3bwECLGNN9UpLuF1DFPktkYZERwYFVwgoCAwRyDUe+d08oiqKL8\nN5GRC1P/mXLWDEsoQ/7QjbFomaA9S1ikhmmNzbyIv38umpNV3Qi3nVgs56CE\ndSrCI0C8U0LyZZAzHEejP2dgMHGxYOkV11yHC3iCcyIP+LEJR1JIpig9RnDq\n+/WILigRMl+5s90yayaoYmiksuqzS1lAs9R2OP/S7GkRynW7wJaVKRe1LKl7\nRwOpG6k1biI//QvcgzsSReNJrYI4fN5DE+1dMDYOTrGEr+GWOHMMd4rQipqH\nP3hiHNBNmevzl3uduw1dr+UazS6UPXgj4YKcabDijKl/6tgzot+ptWodhIXA\nSVfsek/xwk8KzuSby2tdFNIc7cFgZtjhJuX5h2crufitKCN6StNAh2i+QW+s\nLkuoaPz5m4OYkSd8NZhaMDDOW3EZCjItR4oJc8LEeXZOrTGNBlvWY3J2kzOl\nnlN2+I/ci5HxP2mcxKNJaAkZ0+BudgLnWFLcHCAP6E9d6Syjqj76h0yse3Ht\nuN0sV6cqNTRG8OLQus+GvWdZVwgKkD3mlOVLWbUTORZ1MjsZba/L4aNVpneJ\nu0xO\r\n=RHoF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFleagZn7ENQGlu2j7PaVg0aNIKhdk6LI11cXQ9Nkk7BAiEAym442Dw9Ry/+ThxHkDsFQdI9lL3Fyi8S5ldKBGElPew="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.b3d21d31.0_1622141124007_0.6839331647848201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.288c33ec.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.288c33ec.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.00b5899dc.0","@material/elevation":"=12.0.0-canary.00b5899dc.0","@material/fab":"=12.0.0-canary.00b5899dc.0","@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-icon":"0.22.0-canary.288c33ec.0","@material/ripple":"=12.0.0-canary.00b5899dc.0","@material/rtl":"=12.0.0-canary.00b5899dc.0","@material/shape":"=12.0.0-canary.00b5899dc.0","@material/theme":"=12.0.0-canary.00b5899dc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-x1F1LfPhZMb2c5p0xSMM8XUsGJU747q+yzR5faW3DFrbXBR0YirIjzu3uAg/OMr3muVAaRL5Bq++niRr2cPJ6w==","shasum":"dc7bda8a8af3f72854fbf39efb87507a9d08bc16","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.288c33ec.0.tgz","fileCount":16,"unpackedSize":71384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9z3CRA9TVsSAnZWagAAYmsP+wbtHYqm2CI0pbl37HoI\nof7IL6Kopu8WgYFe+ZZD5Kgfd6sitrjt2ashOqorJ7TYF/jSdI/vVACYshrP\nQEtwkZ0uvn4nPl7t3dS6pHuhc1dufKo9qh6ujShbzRjDE5BLGAjRwVWZv17m\nAfOin9afTerqK3/M8/NIpvX19xvQ6ciI2zHGLZE5YX5dZEG5pBMsvTcnPGPa\nLeRlNywmlV/+PEPpqHPWpDfKozspVYhKYqd+YBcFJ6KLTIUjFYo3sFMBcnBu\n13iwB0kArps3a3tSK6xnjULC7ZtHgxv9BTDHCQvqQ4wECl0UvOZ5PDszdHr7\nlw3iUVD37M6B40B0xqsnvJoozfPAs91Mx+U65855Dw2ENsLl/W+05xRrlbtG\nYTzLNL7Ifm5vzk5PF/Jxa9pXjtqayNgHer7mLV4FUBcE/BDGWTAhefeOActC\nNgMm59YmRjDwxl1sc7Wlcd2ox9DMGClLPLreVhsUtOYacKH7/SvpviE9zpM9\n4hjLRTiWj1zIEzy+MVLuGUYOsZfLN6eraOCk++nlUe3wgbG7LUID8w81cnf5\noYRVqTgyue39rNuy1qffIz1Sk+zX99TENfZ5vXVe0cmVzcECvLrYuh2eRmIt\nAC8XyrUBlkwuYNj8IP3V2ChEoxWrAl8VntcUvxxjglxoQbUAzs7uswC9CLo9\npBeL\r\n=IuRi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMVmYXcD5VP0JgjSTtEOnkLV6VIv7epl50biTVTN0liAiB40XmBy609sXek8+gg0WPOF2RciuNIXDWGeJvy0H3FnA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.288c33ec.0_1622662390966_0.9763216815888611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.7eb7ccb0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.7eb7ccb0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/fab":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-icon":"0.22.0-canary.7eb7ccb0.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-olkz0iFUrTM7MBUwMI1PA7/ETGsibXN7riIgqCnFDJ9EiJMlQ0nFOeIiRaX9TtOYhWHsEQHrQVuH2T0I9qStfA==","shasum":"512c367f00d73f24e5058a28a6688e57a0daa0a4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":16,"unpackedSize":71384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOeCRA9TVsSAnZWagAA8vQP/1N5+Xb5o4lgWmlZnoBk\n8s9Itmxj6RXXA93dSXIbipVvL+MoCEP2iF70coV+IV0CaYEV/JlJZ8sVievo\nWF3e6Oa/07K08nsp5Lv9JpjMXBOVIrzl6atnkF0cIlqZnGo+Yxt1VvRwMkZX\n5vUSIqorZhqR9AKoo5SLD9xQyehZVOrX+e9CZEX9GvlUc7IA3cDw1AxQwHQm\nmfqdHdQacNxA1l1AeKxnIs4NCqo6E8a2qO1PNm/UPB5rsOQkm6GjkWKSOXJE\nBnu4I6oc2XMXFoV5ECxN5SUGlKr9J9VBsoRibaoXybp1IQaybRmCFcfeAQyr\nq69QC3iG8J7DeY0ezzuIyAO7NfuP0HTr3f4f8GFexx22LkRXDUkUnZrxfXY/\n50lLtucW7wRl/NWrjMo1vTsbQmZqjh7pZw1V0/k5CambatnSOpP6TUP3FN+T\nJPjWawBZdzhyfQybujSao7L6UjIxZ8DQYvnpH0bHY0HRMTpIZlezsmRgEwtg\n2eH4S/f9sSqR+lHPL04TZ2ohbep6Ug/FRcyagnEVKryWDxPYBGe/0MTPeeCv\nEo5nO3W30yNcl3B6uqR/R3F66htY4ZArL6PuhdeET3GLSBqC1NQr8Lad7efo\ndvpep37e5d00UYO6quBo/lGSWpEoul/vAzkZMoXlsevWDPacP8bgBl60futL\nPa8s\r\n=fBTb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfmO//E9/aqG+hYOTaYJg3i83Ghyeucl1zCWzxv8/WXAiAMFIKArnGZiQiVdNXmlZnCbOMj/IzEko5P1lRAa30lKQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.7eb7ccb0.0_1622750110282_0.42523570179659975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.7fcc0726.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.7fcc0726.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/fab":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-icon":"0.22.0-canary.7fcc0726.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OmZov35KA1BW8e7lFB8TpIo5B/NHbBvWUawGEMBrDT7Nk+5wyzdXyssX2+neYpVnXlfUF/sDDER7JjKGV9C3zw==","shasum":"20ddcb63e38f9f2256eb48101af6722b841b1251","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.7fcc0726.0.tgz","fileCount":16,"unpackedSize":71384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2uCRA9TVsSAnZWagAAUvQP/jh+eHk1aaH/9yGdvvqh\nTfRqcFh43RdrQjo86YCCzzzOVwWWeoOQHc1XbFXPv8Sdtnujv26GCEvNYID+\nO8fgKtJl3KprgjlGvlQoziuEcMQO9h5zDyXbETcfHoXEe83VI+B4V7XFTDKL\n9oGZRzyQrUYnMRswk7lOmEDdnNtPwY6S/vDJHdaAgY6Rsi+peFXGe5PDD3Jc\nSN95rjKAfI66Nlj91AGeJ44T6fsX0DTWzzgRdB3Ld4djcrc8gs6x+uPSQBBB\nVnwpb3JfTVsI/ZKR8krLAwe/C+tL5i2gdiru9dGzFR1FMkCgXZZvLnTuh8GL\n4c5d7HRsbz/RuwzAIUvy/TnpjQkwUAH2i9F7n9nnLQ4QVqN62PV0FqE2/kSt\nBjC12q5y1XZdaQOsgi1/8RmwKGVEVCejw7it//Gbk/gRf+scLbuFidJjd88q\nI9zdyoDONb1TOUN6iQZ9kB9FAKE1iWAHHJFp8TaaD9Jsd+XXsKdk4rf4I+rv\nX8i7Cw1eNYJf3ezFRyh3yWQMlj9JJOF8WHqXke2ZVddDWXAx/KXWJByEqbfW\nQOk86AqeQdjVinFhbN25+ucQ89FW/SBuFwfNlZjt8pNSg8KBrpVQNhmjCDDx\nlwLiqaqeDLbMnkWnO1X7dYEZyXx41uRPjejxoCjTW9ViKOfsdsrPPblyVrrw\nnqMk\r\n=x6M6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEcgJSc1I9DurY/eDrSCR6AArBs8j4BsWMj0lNr73xgQAiEAjaH5PMhRD2foX27KAiMueTLNARy7kmxyf+r0XYjEgUY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.7fcc0726.0_1623113134348_0.15497577880077218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.220a4e5e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.220a4e5e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/fab":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-icon":"0.22.0-canary.220a4e5e.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ea47Q36p0bL9owxcdYeICfCL4xOs4Qqb8iH+6Jarove0jugQiGL95tMre8jb5Ak6K/ULUN8IDVhiBszIEKWWVA==","shasum":"a77bd9bac497068a528881f4e9a95301225a9948","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.220a4e5e.0.tgz","fileCount":16,"unpackedSize":71384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63WCRA9TVsSAnZWagAA18MQAIIkeP73UapSuUixFtu6\naf36WJR8a1LYT6edb9zSV4dsc3LPqjZsjvyVFM0zgzFZCiZd0dnbM4vIvd/i\nMhE4muxAbpsL92YfOACZnhzLMbY+6QtQqzpjmf2nS/JwVbH8v8DTJiXHn6TW\n6nA7ze8dy/jkUOaKnc+cMUqbPOzhKtAfGzFHy2jA+CjN6DNbySBWUcvkXQGK\nqXv8EdhCQGZgs9k/pImj7cc5w9bPO2KO3LWdqoEp41YE5DiWWbtXlhk0Um4d\n6uvuBZSv23WIwov41M8wYciG8VOXdaUn5/YPzMuygtMM+l7oAyRuO2I2Taan\nCG/T+0gp3l0maG5+y2A6g1qt38vXJ+u7sbu5Sbqt0Hi57LUnpU7iBtb+B71y\n0LK+X8FB1wts2G/xb6fu7KsYA/Q/Cz5HB9Iu4UQfZlE2vx+ZqK9Y2UO3uxir\n+ycQbZN65r8/N+qy4zxk7VWubHP9H1NYd4pUZUG/M0quT3DKiQWlzm8msz7H\nqTZM2xB/UGEfDgJt7QyJUxvPvNH9YLgLrzFJO/li4ky1ZZNEFSc74m7cEbto\nnoGkTQzteCY4OK0BV/7SgDE53W2jCD5rnypkJiB6gzjdP47jv43nMy81l4Hx\n2s3sCVqSQMquL62jhivYwTDMqU3eEmjSi4cZwMlTn1y7B7jJAbVseVvstzRe\nhqGz\r\n=HLKB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeYa9ZdM8cVnfMiKMPmqRv92EcFAwO7xM3nDKWnehXzQIgWzsXK3e27AfrZRjdYw90wKMPNffGrG9CWrTJbbtgm6g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.220a4e5e.0_1623174614717_0.2679978997328729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.6b2d6ab0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.6b2d6ab0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/fab":"=12.0.0-canary.474de7878.0","@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-icon":"0.22.0-canary.6b2d6ab0.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/rtl":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-euSyJfyp3J4uBxPKmQ1SLhnYvTItVU8hb5GV3ZHbKxQmiWzhnsG11ATLzLJ/ZQChr3RS94uerQHW6nyENvz9IQ==","shasum":"91da44f548ca9b48856ffaa353a9687187163f96","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":16,"unpackedSize":71384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7i9CRA9TVsSAnZWagAAdP8QAIIOltwkY7BUqISn8nK6\nIlRULn/V2lRFV4S4dOH3zRLNYzvrkCJvCsmGB/habJFeLx2bTvnheUvat8c5\n9eGadR+UaPqUqbIwnATsJZT7E8PYFoRMG3g5i//YoGN8cFSxfqxavMhMQqdH\nYtOV0POz5l4g7EYuHxqhQs+d5fLPTjZYuLycIuESS2WAnai7P88qnYT99Thi\n/NXDxa2wa1DHY8DtlvlbA0pmiyeMniP/TQZrXD9YWx1JNXk9dnaqAc9y6hBK\nR9XP3QWv68J8h44TyE400vP70LuhmjSRxQJGFeeUmW32cwRWZfNagWonu8hv\n6uKfc5bgz194bQT3e+ZXqBeUXxSPxDj2zgu+volAP8sVR2DEzxq5SZFX/yFk\nOegLXVvjomlR9sHugTxort4ltG1TpbS2mtjh+vNY3bCJzQCllHWPePj5N2n/\nVsllioRs5HzLa78tEozxwqGeBC6w3cPI01po7OZ6gUVA7IXtxJcXp9Twj6Gl\n+tXA/WPMzRqL2sAVP5DhX5Z5c2wqZEyszIz6kY9rOGmbXVcQNP6MFyXE+Kov\n1OKPnx9wQPwmx0d/RrW6v7zyxRG5Y7gP/TrGwzbvzoOoaTSIuAsunK1HLEzR\nsFh2bzznzf8lXyX8odhzP1zI0QBqdGEUMq6RhuHVHR9kzIydBlHhJO5XgUUS\nGtxZ\r\n=W3f0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6kyPdKx0htfRl/swD64SsyOr/Rf/GzQYOjPBUs2MLCgIhALMR/chVkQ8tGPMuHRsJumwaQBbUY+ZTrM0DAO0qBAyn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.6b2d6ab0.0_1623177405625_0.8906500571231715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.2b20825e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.2b20825e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/fab":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-icon":"0.22.0-canary.2b20825e.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Flx93zSo7sUj4m3nPXpWoDVfPHx8W8jwVOxY/WCV7bB6/MGu4fbD5z4DS4BE4Ivsx/qKi7AXOoPXdjAGFhPhaQ==","shasum":"c30ed857e1d2aedd7a88d2e9570a968d008d5bcd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.2b20825e.0.tgz","fileCount":16,"unpackedSize":71368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/Z0CRA9TVsSAnZWagAAiVsP/3C01cSnmNC6LVg+U1Cs\n6xJ4FqHHBiIANKU9R8qgkEUExxqCUz8K+hLn7zWq1rrmuaXkbJbr1EVyARz9\n8OmhvXiM5DY8E//x4sZ9UxNQqiFplvT1YFsOiR/dHHlsxWiZh1Y+L0464v40\nCC1cVs9U5Al2jqnwPRiifiq6BMMj0U42qIBMdiLxYkOqjJHzRo1zd856ldwB\nFNbE5xfSbZeVHzYKs/yEmflOCqo9XWSFwlAiyshbS13GsgK/HRYzAchKxtvK\nCD/7xSNdJer2HbG19Bh+YIa3ok3KxqslwRVLo5SBQ7ePzEr158mQjl4c1wEs\nJ6pAlx+kO/Dd2BlRduNgZkyLvNpYHmIrQtPoazmLDK7PODXUhdSxxbJPJBqk\nrb1Nc8ZzDRjac2tY1qpkCWgjgQV2h2zUQ3ZCAiObQSlLY0/rF3vydfjUeygt\niwM2nVX2lK2vst5OSNcKLKrCWgETzeLwKPRmsSRPCZpmczt8qtBz/G8D5Wlt\nYDdeji0giVXbYsNnG6RpWKg6IcZOplLLvTrw11g2aqhNZyXoe5eaMbseykn9\nAFZYoZFuHQLOtVPIS3Um5sEf0esDzm2w/r4w7/OE5YsPUuSOWgi14nNaMxwN\nlW1iYVw7eXy2mfVky1dy+cztSS61v0uWNQ9XDtmVL2OaAdXdUqV/cINiAN40\ns+DA\r\n=FwN8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALH+iu4zlse/8/0gqNWxRNrqBYk6Fai0ayD6UGCn6QvAiEAxiz40DKQtlqmm4EJkjUurh7/Iy8FlRGC6f0PDwstXR4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.2b20825e.0_1623455348357_0.22025108452383768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.e1511867.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.e1511867.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/fab":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-icon":"0.22.0-canary.e1511867.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l9fRFXV1L8tDFkr3MVQ10gum9Wka4FfhHyABJaqzFpFbxqzVJmP44bdgDDnKDIkp5OccTQK7QzcsSkJ4Q/EL0w==","shasum":"9331fc135e7d5d81eff00d1599e264778f768630","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.e1511867.0.tgz","fileCount":16,"unpackedSize":71368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZ0CRA9TVsSAnZWagAANw0QAJMAYjfnKc0uea9CNohw\nTcWEj07tNRF1H+R4ZivV5nyaESKJOgaoH4Pv0E4S6dGGmGi5T7ps2jZD9dZk\njBP9/X0hXW5Jp2cb4LJus/l5yj2zH5NuwsmimhCzfwqhU0YfJFEvJV0oYzWy\nGrhfavE6vyBcGB/j/XgKHspEaf6r9p91UXYDAvZftxfbwtYxoTK4edn+86zz\nM2Ik3ZvyxV/msqQmgJ1CoWVxMvg1frDcYZwA2cJ1zs0Kj3S99OWRTEQCSu84\ny3CgYXWQUj6DO46WoKT89PALb+ig7KlFmZDuPKYcTqnkhElaMyJCceUkvQMq\n4i4a47xcQPHKMUdVJRt//+lw2RI2eUDlYx8AB7OE8ELdZ+IekX+GDjOIAFeg\nPoiNBDFF4561FtfdWx4Z+GxMtXadcdRBB9kXdiScaxCucZ3YqkDiDt5i7pSM\nw84e/4hvkTcMZTU/3pBIjVxDDk40xIuSWqvIBIS1nYdE7xbgV3eoIZb3g7R6\n6amCyF1tYYOBFtZjlkN6Thq0uQfGAFB+xfPOqWqh7Lo/cV2ywP128sxPR6BD\nzHVAG2DoCi2m+takTaZvQOKj4/ruajSwwa7XkUTC2le4WYucJHXTSmMcvF/7\nuHNtXIpo9KjpKrG0Y9z/ey5xjrU948MwfkK5hj7bKYDbwoQfSIS7TKkKGk4f\nZCXe\r\n=eBhr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzF7A1T8RrkWAcmp6aCoD7MXsVViSGF1D7IAOLtbEiegIgKwCna/a7sCzfMdeUxlvi3tf7Ik68/qctPjym24j7Uko="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.e1511867.0_1623459444640_0.8563488134240698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.ef4a0c0d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.ef4a0c0d.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/fab":"=12.0.0-canary.8415ae585.0","@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-icon":"0.22.0-canary.ef4a0c0d.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/rtl":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eFtqRs8y6aIznvGvmnlJzdK3Ho2CqMSZpsEMzMYUL2B7UWjyWi+8dLnjDFn63MSQ8rTRlftbXKeAdsENUaX7sw==","shasum":"4d39a6da1de05d761eb4dbad07be3d44a71aece7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":16,"unpackedSize":71368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTeCRA9TVsSAnZWagAAFdkP/0brhRw5ao9KWIipdUe6\nYHsrdVqc8d9cMwxnMnq+6nkvU7O9IyzNBJsg3P2qyJ3hIMdD/fJ+C3VOmZ+z\nT+MmKyBLM1v61ZFVoUxNQytTuPcA0NvyvNt81ugjIAhk7PwwjSrPvsy+xl4s\n92YoXr1aKOgTXACBr+YEvxWa2vJVjyoDnads9fIDov569OoCfoRoEhm8x3K0\nevqQTgGdIQjYxFJ6LSoIkgGf5VuuIjQKauHVQ0SiTvhejUcfhp9eJr8rQgSv\nFXITKwxauaoPPkDjNLAOvwpV3ruTRMsqjLBtrQdT/eRSrNX/WTRULQ8kaosj\nNnC5XxAySHUjY4ywSiXfp+x/wSs1T1gHNkVLzIEhUVvwWpTaIZGAGJ8rwVOi\nHaEKkspb+Or+vbHTTTCC4ejTSxM2WM9KAgzTORexMrNjcfcoX4b9P1QJ/Ia8\nGpdoLkqYusY4SFhAF1P3EmUf9gxb5VmGs07dRr5m6T4t++j8zQImS6xqLO4K\nuOiacp/Pt/4Yy0jcZpCAX4qLAn+WuIW8OH3eBD6URDJA5VDDHiSLams1dxWI\nglT8qA/T1GBkQf6S7vmaSRNgZ2oMXbs3PHC6oVkPrQn4G4vnOK2SLyQRHYB/\nftBuWIC8pB+LNDNDrNlF3L917sdDpznL9rvaPcR97TE26d9IrkYMfY5kvHx0\nqjCr\r\n=VGbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfr065yEjAnXn30y+VacZg45gmSDWR3YKJL3RFqMrRigIhALVXz/ZBeRiFGJZwLZrGhuZyCaGQU34JONHpjfMJL9Yo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.ef4a0c0d.0_1623786718446_0.9777667646663084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.573d8913.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.573d8913.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.f705e8048.0","@material/elevation":"=12.0.0-canary.f705e8048.0","@material/fab":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-icon":"0.22.0-canary.573d8913.0","@material/ripple":"=12.0.0-canary.f705e8048.0","@material/rtl":"=12.0.0-canary.f705e8048.0","@material/shape":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BgbTbHJhDNcqPsKDLJR3alz6mEO3uP2BcXu/lvBX5RVcEW+/5BzMXHPJ2ki+Lk9D9knk2S/qiYDEzOEeyo4QuA==","shasum":"839f00b8d9cefa9572b6216a094fd1dc689ca653","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.573d8913.0.tgz","fileCount":16,"unpackedSize":71368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSu3CRA9TVsSAnZWagAAh3AP/RW/34/NBw/eOg6NdCdb\nsimG1DUFDybageYc1OR8nTt4sYeuw58rixHMg5AULKtVntO5Ry26LxY1KY/K\nYukkWwUMRe7c1A6CmyZrUkoeedoYdqMzwBFwJxd6xwzxmvNet+4byGxDshx8\n7H6rIK0Lzzx1xMONVmxDW8KfrlnJzlTYj6zSWEWTRJCo0XEAu4om9Z3rKj5d\n+WR+cF/L2DBNg5ahVuVrvU2JUtB6WEnzbmkG82wj+dOA9XY6pkQEnsRKs17r\nAwIXwpRbfAvuDCbJqfR/LnfursMqSHCiYObgo5SnMrCDE9FEdnwVe1TkS1Gs\n91Dj1Zx+008eOP6dvZnCqDIrmH1QMZWt6fIIFk4G5SRniEw/Xw1zNKrt3aO5\nC5SB+wh/9+sMW/jxQ4Zw6YMVVbUSQzUuJTrhaOoCqTfDKRkZcZo0JXPfj9Sm\nqZaaqdsG8AC+z3Z+cVw/2EHepLPl0azj+CoaKOlvhRxT5UUOq6JjV/9y3pzc\nK0pmDpMqw+ePQeCeyV1+eukewhgIgs+7ZGI/bNGVm3iZ8UVswCVzdDbWyOL/\na7PBDWlJYXOWUFbZXO09C5VGNKIYY9ilo1FqYIptrmowwe0jgoUWnU5AIx5L\nHzBCrUC7j7ambHqFC/yd6NcwiXdilzpBWWPWE6CbZjMkSRQ3IliBwTevEgu1\nlLuS\r\n=0e4t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYsPMcPOp+Jw3r5IdkF9Z8moZxy7mOlGinmFigTLY/eQIhAKytP7g9Rzf+J1pX6AYUv3dVdFUNVwB11TZotFBM43gb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.573d8913.0_1624058807510_0.4332766316767085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.21dba001.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.21dba001.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.f705e8048.0","@material/elevation":"=12.0.0-canary.f705e8048.0","@material/fab":"=12.0.0-canary.f705e8048.0","@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-icon":"0.22.0-canary.21dba001.0","@material/ripple":"=12.0.0-canary.f705e8048.0","@material/rtl":"=12.0.0-canary.f705e8048.0","@material/shape":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0eegPl7++HYdsu9VzF32hjJrpzguzccUS1PXCNivj2wf2XiXUHk4k/UM9JZmprEiAtCb4ZS3AmfyWZeG275vSQ==","shasum":"8f4d102ee94361401210c219f26bea07a52fc11b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.21dba001.0.tgz","fileCount":16,"unpackedSize":71368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdcCRA9TVsSAnZWagAAVpEP/iamAy5//4kvYN9VeiY5\nRprxv8rOS56R3mjWGoj7mZTDCCEa+hi8CLv6oo3N0qsMNuE/aChUFnF2cW/p\nYed1I2EBSRSb4nA0KwYWnVLZweEGdm72JT1cDw/NJY6dV1+QpBanyBeaTpOK\nqdlyUT+aGoGKQYOXoWgcYhoBk82/7TBrDiwTl+zA29aU2VNnHTZCEk1f00Wq\nypkxYPuWagwl1oH7zni8/2ffat9knK95Nr5cdzs2q4yrfkRWvl71F0sy4oMz\nuXBEJ7e41XdR6/DHTiVxDFFFHt6UVnELHNP1o/7UNfiJ7+o4Bb7JkEuGpuN4\nCT6PiGNmAG3wm4fR5INbjvDstY1L1RQM3GrMn8qfCaLJKe7ZEnnK8I4LeSBF\ncbBeE2qDdxrY+l7U10u4xQAvTFu4G+Q4yiboBVeiQpKiggozN+7whwY6MkZl\n5VV24mOuG56f39TaQzzHWpgYIXUBl+sSoAlttoJzQK2zN3ZXwM4UCNL7nT+A\neNbat2RCFPMuXkTf5tvk1RIRjX/8HKUM+iYGlqfcovRiV32r9nUVYP6jI7G/\n5mc/WfTTHkrIivPjSrv90+ziBjaAMFBebMMSv+Xkm9/P+uhyd/2E0CCIdRaz\nprKnF+HSfzcATSwFxgTe+RZcCKkrsYR6EzNvunABgPeplLwMJ9mMjPuOWt4K\nrLTD\r\n=nH2v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD90NI+G5kWl1+EbkZeW9rxrijN8waGWg7e7cAXAf2wCQIgI0fVDY7YbsuXiXs/8ak9bLf23fBvVC8sHoNC6oJ9fmE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.21dba001.0_1624311643577_0.4151754573651041"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.6f5bfd0f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.6f5bfd0f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/fab":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-icon":"0.22.0-canary.6f5bfd0f.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mafrOp7zfMgbSVp7SpKvMtyclji3ua9g7xfZbiwYRny/JsPxlQfgwR6PyCLyEST70OQIiXYwo+F6ts202Nb/rQ==","shasum":"e800562f0df5e798103650f4b153484fa48c6b6a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":16,"unpackedSize":71368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2LCRA9TVsSAnZWagAAWHYP/RagVjg/criCZPgl+Whv\nLgPluWS/pOTpqTKzjOd3/UCfHLPCZrqNIpN2hUyqI6QRZSBMD1Fff0LAShmG\nZe09LsZFZjnIOUz2hSWQeu1+LxPFFMaTHyQe9p6jfp/4+DoFdLRgt9QLEEgS\n6gA08rClFi4bFziZ+G0Y0hwtFUhyQJwcpLb+r8rtjXlbrYwREa0JG9jhH+rN\nWPDYWZApth8mxQTv0jmiS4cvbqGoYxBTKaSdVysOz24vm39ATzw8OwlkknHB\nUClhzRLOa6YzbR9StCXnk0aU7rQm5/pfSJ4x6Xwy7vdQPJrpQOzRInKdjVDJ\nl4lIGy8cYyVduMKiI16rC8MJVsJQlhVcYCrfe/icsMzajzIzmabGs9dtUEnc\nkv3s+p+iqy4PKUbVYk9I4Uu9PCg0IMCkqZwHr8Nh46G43LNFu1/WrXmqJSMh\nu0MeXcb3mnntPi75yqyMlhdJTXlJ/yCj5OYK4DMfvHBbj0BjTshRyTrmyFto\nnnugxXoVi45J9WqWx598hjDE5vZ66DkoOYkHnKzMiYOCvvrlxGmOq2uqzIe3\n9ED/VpEs25vca+p/T5sj3rALTQRmnG5OTlU2v/vzO0j/+CJt6+z5ECjrYGZO\nMONb70pKmauLC7GSQduZjZrav6JgaQxQC3zyRmU47SLBOHCR5YLjMqsAF/oj\nJP5u\r\n=3IdT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDg/DagAyNz9GRRVAIF5nkugRHAtOEnvHOMit9JwMpkWQIhAL8cHNMCHN/8byek5rJjfTRt2U9Vray3wZXwadfH34b3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.6f5bfd0f.0_1624575370966_0.32698228523914463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.fd8360b4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.fd8360b4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/fab":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-icon":"0.22.0-canary.fd8360b4.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cdf/vCuoTWGQh8E4FG2JyFOg+9Rjk+6XiBvjlCtxHnyLyH1cvbE5bbN14w5Q8wumDUiuZA8ZvLMLKfU5w82hgA==","shasum":"226b1f3259e02eb3e42899158a6578b2e51f8f5e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.fd8360b4.0.tgz","fileCount":16,"unpackedSize":71368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inaCRA9TVsSAnZWagAA51kQAIpTkJmcpbZBgqNPa+mZ\nUnSbcx0kCoh6riCP+S4TB2ozI0uZON5+hvjA3IuUYS+vevmbJgn/qu8wtJys\nE/FGNVYFvclRNcT1B/Pp3RioB9Df2cZNEWFlSXj0WHac0kCdkVU2Wrr6q1Kf\nf2FaGO2znt9rre/I3NBE8mLAy4AD1szrkBlGO06W3L5CT/4eg7Uh5eVozzNS\nEEFYJcQ3WA3qWIRonQKiCFOZwGYPWAC2JcHya3s9toI6fxhMmahnANGDENE1\n4wbkgM2a+XZoLegFGKMDnKEx93TF7qkKIRd5AgqKuzmaKRwyKvePWS4lO5hi\nLtFeOKf9eT5/bnQ2FNEE0qwMOSZqHMVVnTJwT0mTr9lGrZ0IVZGzDfBGLZL4\nDICRslFQScnV45G6BEwiDzFvYQ3CQ1Smd9GwUlGfQPKfQAq6uhtHZ/l3qHRY\nYMgHGKujvOFIDBQCkxqpbDh185gHOOh3Fm/2ogCUGMTEDJNGG2P7VNS6gI+t\nEuL2xbHKvRJHNNYQsPyYvENR92IUANWDmCuAlMpwv5HEO0AnHQzXmJZroKck\nvMPrrcKZxfi0WbByMaSkaSdMvjmPPiduA0GtrmYu4MWOTqPGnDo6oC8V7i/m\nikFbT9v0Izdeih2kudV9gdYN1IcbQGglyrZlPWzGVVd9UuhMODClfpBH1n9+\nkrrh\r\n=KOkY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/Pg2zFyzyo5MXyxC0OSURaz0NIYcIDcyd/bh3kDxOQwIhAKXHD6JDnL/9HWh9SrTagrZYdmPV+NjnbrDadEPhB8o8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.fd8360b4.0_1624648154357_0.967729187745181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.6f74432f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.6f74432f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/fab":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-icon":"0.22.0-canary.6f74432f.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gPde4q4WHAnmLK+Xeq+VVrQu0W8AxlnYCa6Fv5GLb5A9h/nNNAS4OMZwFi7n+kb/roIqa0O6JVvXjj4X4gN2RQ==","shasum":"20924ee9aebb29e93cb04505d3fbb969bd237d5f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.6f74432f.0.tgz","fileCount":16,"unpackedSize":71368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDKCRA9TVsSAnZWagAArNEP/1iWTNckHfA0hVaCNjTz\nbwuvBjAT2erazoOb/aIvVzFFNKRIlHyOo4GvVUlwEKhQEJmJvNqTE3W69Nyo\n00hnIPyynPJCRL7oqF7N7y9wePC9ss3HRVAFsxyeb1mZ3dgQ+UCXVQ73oEGp\ng4DcxNAOq6wnVVRUFUv3zcGmJLD0/whHybzXIkzH3BEde37e9LSRttV0P2+T\nGoxamBuPB0eaB1yc2wNfli/t58U1pQk45BqAWz3PrGCVQp57QafC8C9JYTPn\n/4fHjaAT8nqg9Kk9TsXJ3uMSPdHGB7QgIiMMDW+LsiazG2oBv6/ZJjz3g0G/\nwdHwoTsY81dAG3GlyEyC3jv5pFrbdklCpWa3s4vsxjp7azi90MExrevwaYoM\nlF0Z9ZWLTczsRJZ4ZSypwiZ7aDOHrvY49Var8pnuxcqiV2ikGkFp8RpEZLob\neLnOCqW4lVupMMLCDT4+anbllKyWlnIv3MUu/sgIJzj451fTYkF+3jAPnFre\nybCBS9P8GQJbgmFgGIawXhVGl+0gddwLy0zQACDnEMciiarvitgqri2hxWTl\n5dvyf6w72z+refQTqbEwOgzY1VdEXg3cBFn3wojV8dl4m/WUPm8wpu0AtDh4\nOruUWdZsoUSAqt3vYA3qzTedEfkLt47jHJ6+ftPoRfX3ZR942gsSwaaobtU4\nDCsC\r\n=nzPV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDixhCaIlXlq6C1bHTvaJ3YPJ6GoNz3HEd6hrx1NDRiRQIgS2w9gftqhd3JNjzGKN6A2viVi8wE/7aq7yiDlIlyhrY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.6f74432f.0_1624654026458_0.9259938681004898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.b62f901d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.b62f901d.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/fab":"=12.0.0-canary.4ccd39bdd.0","@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-icon":"0.22.0-canary.b62f901d.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/rtl":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8uQcZVVO5zCJMMJoDR7Sli63mhMfQk9f48wT1jngjY3Oamrn/3Oru0fZ5seVA7OOOjmTQf/vaezlO/eh3xHZnw==","shasum":"81427eae12b5993116c75b00c698f287785461a0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.b62f901d.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXxCRA9TVsSAnZWagAAOlYP/3CMrg8MHgIRQwZeOqlj\nvn+M0QAxFXnJkU+ATu68Vptp9MPJY1CoVrFOXPypjKTOSGwol/v4vtIj3XIo\nbkyiETwGxSPjcMnIwLivq/k9Hne/k1znD8V3i0oEQBgXGH882yadiiOQl4cM\n4LqwEjBiJdDEIpV75oZU3tbaBem3e95vqF0ktz0HgvCtDRgTiDMGyZK3atf5\n4fpW51t+rpoS2UrN5iOYyKhH6Nqf7uqH4AMxXzYZMcUyDcroWg8tBT1d9VMw\n+YvIx2zoMJ2inrgd6AjrQa0ifUAlUY6pZRpTskVjOCDvA5DnVxg2vk6S+MpA\nxpW+ngVjToNWemTGJts9UfAlRprVoBFvxRrNXwkev8lFcIfDavtM9bDtKTxk\nqBpfIbOCVINm//ijPhGHmIT6Fs9QrHTIOAkpmUX5Q6EGaNrBvyhIcUY5O29I\n4+a+J9EiB1wtFi40BJGSWQR7F0CaGw4ZqmZ0BiAkXHL2KxlHZr3EsAtLu/fx\njS/oYJh53D2ePNm20yJnrQ8VQOW0NZm3mL7nR5MKAC6B3AhRZLFz2DhvQIQP\ngRfgrSUL81PrMy1RUWmt7etaqLxlVHsIY6iKd5SWaRYxPsPhIk37EFdvnks8\nLxjkGosKXrxBmRHSq08cSzd1WdP9XR443qXeOs1AzQwfOYz93MNnQHTJ/sIq\no9W9\r\n=nk+a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1IhNGXBAlIB8XOw/Ct+cAKu5BGwSSyOmpiNp6PuWVzwIgIsfAquLoBAQDaJiaF94uztffveSREN1XIs4GwMVSU0s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.b62f901d.0_1624659440719_0.15461411501512434"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.73122cba.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.73122cba.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/fab":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-icon":"0.22.0-canary.73122cba.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VWQIdIYpYST1J2WWq8F7NEz6ZIF/nU/5MSlUDlwtiOTv+VUivRYTbAan4nZF0OntiBvSfjt9iI66q3SmFZY0fQ==","shasum":"ff6b5e7189950875014e246b79c31832e3d9559c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.73122cba.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfWCRA9TVsSAnZWagAAOgUQAIP+jhnuz4+zkyUXNJs6\ncPbK64FPseYFSBEIKRq6c5GMgWoUR3kSeQVVk+sMPzgsbySzYzCNzEMs3za6\nisp3ewTm2oUDf+Hgn8WtJY6X9h8EGvCBhIgZYubF8WFl0QqUK14HzQ/7cbFt\nv81hv22qx4sjq7UleW+EyqWjPGfi4Zw4yltc0QcAVXyb3zX5V/r6WPZcJoHO\n53X2bAk9oKo3JOPXn9+hKLDqEqZKs7GDAgj3MboPL5lTENE4jUN1p9wsVaDp\noF5jDxdx+EImzMZ2G7mT5TedNrHw0nwUTsnzlfm5O22Uy28SNuxqiq5r9rfb\nKAaeR5D1NG4RdzaB49dZBOySeNq/vEQI8WoQWDFcC6sH4g0tCTc5DkW8Q0v1\np48IzaZjp2or7EXUF1HdBJhzAqVqB22igCMA6/iyKEwiT+bDEl68KAzFryTD\nDGe+LFfHej0yMMNY11KmVcpTlwG5Vd1puzIPsAqU1BbMmU5PP0WNbBykkKFz\nTd144tyraMyh23BgYPpoUykn+g0f8s0dnBvlLCtIzK81/KbJjhZqJ55WXjFS\nBM5rTsv+vDyGd4nPbdFmOJZX+32+/4pmOJpRU/j/2HBfgyCU33XHdL9HcCTr\n+oPADuJrknq2KjLbFMHVzWeBKBODYNXR9rQVzT4ceKLPddi4XOKLUJRGIrfG\nU7GV\r\n=a8zV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJtPd4AoUH1MoSC2nAUdzL+F/xTediB9DZyk5msgerPAiEAgv+LiZKwSX9kxcp8zOV1vFDvDaH7x8YZPgBziJTfeiw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.73122cba.0_1625081814348_0.51924097823845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.a6912af5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.a6912af5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/fab":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-icon":"0.22.0-canary.a6912af5.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l6tmZ3Bcc5O/x99EyUfIYSx2FNKKMXtgTL6cmzQXP474nIM3Hg6L4aLbQqNraiAvRX/q7UfdsONXktnpRtLVEg==","shasum":"f26278ab9f04f626a2adf46a1561ec7ba2c3a402","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.a6912af5.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTQCRA9TVsSAnZWagAAGMMQAJBdFonejqJaA0Q9bA6M\nyl30jGKYTzxzuoDPMeFBemKXa+XbtKN/XAYEh+4pT29u35w62iQPxgiiTRdp\nB45mplKVYRYzttsPDECvfRG3NhO80uoSkv3vYd1POkFEdvb+y6ca7QlAQK/p\nXLZcKjzeV64k5BIlNH1xYizCy60xoYAKYbfw3/BNTZBrgyqIfksom4RC154l\nTIP1EarG30uSUDJZ4/hISOyImdM5+WMAq24cbkGeLT6TaWOMw981ESqsQtvO\nW9MrjMbXIYxY/qpQubRn5CdmfnhdIvF+4A549Ip9ef35PfxWXnj7iAvLPm+Y\nZd888punjujXWE+wbeEwloHbyTkqw8Gd2lMCdZmQShOUwpJxaCE6dLq50ltw\nAnxDxe6GYLs7q/UaG5JKnNu2hB5zneoAkeN4NDOMmXY6U6R5EpzigU+jSh1/\naaGvPaJuA26MVxF+L1o0QYkM3rje5cdjLkpMfXyK8NDXX7EooKD1Jz+QzH3S\nOe0VtABUcZAXigO0ptBg8BnD32bBGu3+bNoRI1meXNzpfwHeBD2CQ5aNctz1\nMoOHCP0OuHB32ABT4jfMqW7djnxDWaqtqzQpJ896R67G+c+PkVenr5PUHeaF\nXXV7EkABfdXBB0XGmQ02kMwFN77ZLDHo9Gl7+vXue3QrtUGPQ8GbYAjFqQ+6\n9N76\r\n=0lFI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFbbDUobkUHyMCSzCy0b6G2yXh4QuELP/v2DbLf7H32AiEAsxOgxQfZuSjju+xFNdni4nFHBh2V8rjrj3zwMQJJyS8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.a6912af5.0_1625175247825_0.056246837308878694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.134f24bf.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.134f24bf.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/fab":"=12.0.0-canary.4c80072fd.0","@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-icon":"0.22.0-canary.134f24bf.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/rtl":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xbgpyZF8Gc5TBEyOsFwuJuAgb+8H9H+14M1GkRoh/5uXdPVWduyInqWGcK8YoqzwLeFzJZenS8T3LoidZIzEIA==","shasum":"43190ba59606377d6f8d908a45a08e7c456bf0bb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.134f24bf.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJ6CRA9TVsSAnZWagAAKPcP/0Tq4h2DjPKvUyuDfCQd\nt9bO19+u+WsxlfpS3OLSYdWQ4qlfLvhklVqLE/YBn8rk2T3Z2HoU7x4UBmdn\nGExJCo9MJY/pQ8sOP/P3hXRhfQEjqVMl3oXPSmd/Zc7huCSmhkodB/RwMr2A\neEd0K7vTSPeTp9l/zbKulQyPIkLhyzPWt/B4dDNXXqGExOlKPovb3r6+J1Fc\n2JX8LtKD5Fxrm5KXfavhfquPXcv7hasp7ubeek6AVzHWR8cpoEOD3D1NKssw\npjMtmhqYvIQTScsr70LlZHD3WGlSXB0jSfWPhhdIXGdsp5SBJ06hiKhmMUFN\nfCfROGQiqfGWVsUpMl0y9uSbk8+7pwPF9SFLfGVNegXY7H56l/+yML6c/sqx\ntIa6MVLC0o9dvZoKZZEHb42DlPgsnBCFsQFWJGc0MHHkLcmQXpUpIi2gUG/h\nD0ePn9P9ZifuBcsJ8BbngVVY7o2LCuRRh05T991HavlWTQdaJwwKcSUjqacr\nPVYc/MEVaHQHXwudcoh6yCy/bHIt6C3daFgnFyNLRC7u3dX2WQtta96oFS86\npb0ywuTRNx0BeWvTJ9B6pI+3VHsqV20YYuQzsQJWhdgyCmpce1nl505AczWZ\nrMN8A05YsDct9biOcyBddqPgk3HUU0hUBIaz5/AiYsKKb2zYHxwIIYZmKWwV\n3OiJ\r\n=Xafm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlyZoSSAuD4yhnhiuLHA3NoZtyTQltL3/5nE24JuI/GAIgd+mJNJ6GPlNaxrsZpIDY1+Z5ohtQ3WfPDKWBtRWTXzA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.134f24bf.0_1625178746432_0.7965293223781098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.1debb78f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.1debb78f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/fab":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-icon":"0.22.0-canary.1debb78f.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hFDOdFCfzod0NKNaGogzsznJ3EWlPluhDRTl9lHqy9BPlJ+cY5tvmdCBArWZsXaiad1c1SyTrjiH4kNMQSOQVA==","shasum":"2697c58941e9063d5c10ff0e79fb4d2b83ddc5a9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.1debb78f.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PllCRA9TVsSAnZWagAALc8P/3dqtqq3WpqACGf1L3AH\nVcD5MPzh8IClNrwQnqH+q+kPAs5umGkQk5dkgaLCLtamGCEFDOJ3/dw+jZ3i\nFlvr/crBxdfS5YSs/cAIwpZIxJPQs12ZzBRLOjqV83QfuG4yE6S2nHuMSFjq\nfLA9bk29xeh+ebPlN56uyE+ajpvYfo63AExxQnPhXDrEpY/I/N81VctGKB8K\nyTCVKy+HB90KJMokBYlFo5dCzzi29NSYctK5ttzxQtPp4neFisv26NpXkpv/\nEfE8bpzfX1Nw9VzsBMMJ5c8lCpe8VOvvCznvNnvoql0Xk/k7VcYB4MPFWQva\n58vxbatxhsLEgLejfmNBtjJj7ndQkSe/tJ/7oIlw8GZGvfzCAfiGV1dtWV5o\nJ5tLFEJ9vqnt/jz2zMJx8GUfH4PUU8TkDzin8gMq6r/CMGtypHSQ67s2Lnao\nzZCpwbBsVFI2s2BwSHaD1gMqzRH9KU2v3XR4t2ElROSHc/26mERneOBdA5of\nirrvYXmqIQqNRc5LrESUloEAM60zkoON/iucezzRjnZ+xExhDv+jMJuSLE2N\nz14/esLghAo3M0riFKlv7cxvb2lgufywNYIZ3J5dsP8zZzmUhXZu1IwbbcS2\nUcXVymfK8QmT988SHRwQF9ogvyNQf7bzMl3W7ty3L/2Mhe0Y5WM0Gyb/Zt5w\nHIi4\r\n=oBLA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBc9eOb51POf/G0bsgGyuBWbdYCTrZ8KKNjeVhjWIffmAiEA9s1pyKe91QAWYdcUatxgfDO1SKm1PnUlKOaIe1s5tjU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.1debb78f.0_1625618789014_0.7751038319470323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.d53edeb6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.d53edeb6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/fab":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-icon":"0.22.0-canary.d53edeb6.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6Y82T7vDM1Wf+07WO9vleg+S2O4kz9XHWIhIk4MS2n4FXVg54jMlWxgB556TWEUbVBjBNPF7G88N+1u49ps8+Q==","shasum":"a4d83196b098ff9de51768ecf5183ba30517db01","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.d53edeb6.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2jCRA9TVsSAnZWagAAW2QQAIHeb+d9OLMVkse2kE8h\neecBy/feBz3auDXzMdWQNIJ5TGUer7hYN1Yz6dlZFgpbPdfDKHXdQJ6bCXDu\n/XDNXQ3XcztIliCPxMMfQKl2pgT/k267gL2rssM7STpTW+XkMofvvuXP5zb8\nDuHYgjFlmQHq5RTdHBrxp5zGrlucCXnFRldZOqMAc9F0v7OAoNKxRrzTDFhB\nj1o0+iQFsX5hi+BCcLtp9we+7zLyW5df15G+8C1deZHpSMEoJ8W8gec6Z7ho\nuZadJivx2f0Wx0+hPtNEBMnwZJVNmc01+f2ZU1HDM7iZUTzi2E/q8FWKNL8I\nnaWj0hDaOd4rOz4E+LHTLr8/PPj1Makk9g59NbRrF0ZXeUQ4d9fD9qBYG+wY\n4TpeQhle+tIoz+AE9gCR/83gmMetNkB2Cr08eBF8rQez86+fohdNufbEm8Gv\nTysSs+fzZ1RsJ+bIZrQ9wAMmKzC4JJ/bFI8MItAK4ShqyQK10gHiCq1IyhJJ\nN/41Wei/+OTlcQd/4dSaIG4GQLklxjoTovoDbenm/JnO4SfQI1i31SspF+UC\nparI8zGI0Wa35Iw78bl/ysBBPkHwngswfJvbNLM6U7XzfDUbfis9611OxuAL\nXvxhISA/z3Wvr6l9Y2EquEUZ7CiY4PxGcyxuLYYdgqZVnwIjHwKOabiOXs+C\nOJ2G\r\n=UUg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCot4KNmuG6uvVtu//0tcIKQy3WGADvKK1OlO1zwi/W0wIgLwgq4OxkYx5RAQ8Zc5e1iokrC+zO2B5t8m3Y9Br81fI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.d53edeb6.0_1625677219391_0.5359752620474267"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.2226489a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.2226489a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/fab":"=12.0.0-canary.d0f9f3f2e.0","@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-icon":"0.22.0-canary.2226489a.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/rtl":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RZ/fyzQc5KzoIdyTCnvNWQfrD2F5gf3ds0iRJaiobLpy2L+5kynBA4r2bKJMDS/1DtWeHQPKDntTieFcGaqUHQ==","shasum":"4ca21fd814f314dd69768f149f5fa96749fff534","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.2226489a.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2BCRA9TVsSAnZWagAAObwP/0flFC3j+AVba6k2RJFp\nNqvM2Hzb+5Ki7hBb7EaVyTZGqysSDLaN+Qr7wpXpSN6Kj18b9CxbsjBURBb1\nIFoLsgu+dfpzc51Rsxr8dR1ADaM3JwaZwGw0me70gwOYxvbghA8tSbLy4Qcm\n6QRKl84zTR7e2C0PRKEC+QkEnyL0zTMNi+9yR1aXD7IRbp51Qo9kxBpn4TtU\nXRb5A2LFRWmiXMVz5MEyPlNWQFR9z9HT7otc1hRMKuLgtMGGaWVkALMw3WWd\nug68jDZHKFnrun1/BlbEtWW6g2+SAS2YXYNqYDYhIy27X3WHyN+KffTIAMwO\noFlQL29cANmVEDv1zyaR2qNf5YB2j+/umNu/kvNz79EULu2xCNLPzSiP93RP\nAw6WsJm8KLijLSO8ab47PoN5ZAMoKvKcote3XflJvMkSIgI6zHUpi8ddHnRw\nGMjSk7YZ9FBnFGfZSE0UMvrvY5K7G2OrrwLGKuWl+IwzZSA8IhXah2ky0zTl\nUEiUlXvHY3rG1f9Dc6rBIJWpIanqdF+uHGdMkWLDBqYIMKQdEizYQmoV6Q0c\nntjKJD4oGvgNTkOidLZFXnjX+6fvHa4/VcdW4eaH/ZbqeaUN9WV4XI8p1JNX\nqBofkiGYOxfote1Ag7mmHx6iMRBK0chYkWSQ8p/nTbnFYngYwG/VywzcAPOk\nnwLz\r\n=YiK6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDhscK2ur9Ug8xyU/xM7fkV4ci+hEh6N5ZUc5fxW4jR3AiAn2aAH0bhcNMnWzL38DbuY9eCcxQhCorIWu8b9Ar/1Ig=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.2226489a.0_1625767297371_0.5934301549394014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.d4801c11.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.d4801c11.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.adeac0549.0","@material/elevation":"=12.0.0-canary.adeac0549.0","@material/fab":"=12.0.0-canary.adeac0549.0","@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-icon":"0.22.0-canary.d4801c11.0","@material/ripple":"=12.0.0-canary.adeac0549.0","@material/rtl":"=12.0.0-canary.adeac0549.0","@material/shape":"=12.0.0-canary.adeac0549.0","@material/theme":"=12.0.0-canary.adeac0549.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ey2s0eySlXiB5HKDnsfO3T3IdMyXHiA0xMyjxknH57lIaOyuYI80cicqpryqLBzgJJ1bt5Y0OIbQd5yUQkGRzw==","shasum":"2327878bc31d88f131d18446697e72f5e1cb4391","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.d4801c11.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51nsCRA9TVsSAnZWagAAH30P/RoqPLtn5zJqh2jatpFT\nnYl4iTUkQGiydmPAIH8ZaEPmyJbRQ0unVe0slEQXfadda8YlwG7d+kzfK5pq\nXNv/PjfvwCFnm76Rv2d8R9xO7VGY+Prj0sHxjMLqtWwyyGlKdG4C+Khpj2hl\ng1JehbRSZXkRyPfIsJ3eTJ1gitH4ylQCM+uXA6Br73dhrznhT9r7eTOia35M\nzIC48y3dDuJL41LAZez2P/OwkDtCAanPi3kLg+22bSCCUl+4S+iXTKBsReP8\n6n9mc+FbqFJJ83CQ3ASilXecnYpNzx4HKfxLR8todkhT8hCDRbxuarHfxUQX\nTR/C0QCzDtO5jUk+K5BfFjD/ilapMTVRRsZccl/qQPYzrdSvxD0cDr2sppNC\neYiVS53KjBa4Q8GkCuvg1DHni+jU6htHmZZpD0IK9dbfeglCPZBgw75ZI4WY\naZY5D0VvyW9leGw2rvYeac3tLBtjgWKAE5387nonOcsPgM4YsUgbaNrh1fBS\nnSKLhHmXz3vG/WUnTTZUOWyrhH35zjN6ZC/ynotcArBs6CNVKTkbLCGaCfpx\npu0BlrTW9RDw985b23cG86Rva9gmj9Ttft8THIFZhUr4iVCTzOPO/QJhFE/B\nC891vy0/+hre2jaI829lajhyiw6lKQ5zCu5Pm6tlQaxGaJ0Q2dLmCTUY6mpg\n5H6Y\r\n=3y8S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDO2kx4vHmb13iBezdyPXMozb99xWOAJpw2WCVFEULKtAiEAolrBMaGPxemKzSYeSZvij+GiNB54P+L7J5/zgMEllxU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.d4801c11.0_1625774570470_0.4334974479524991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.7ec5f2d6.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.7ec5f2d6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.068fd5028.0","@material/elevation":"=12.0.0-canary.068fd5028.0","@material/fab":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-icon":"0.22.0-canary.7ec5f2d6.0","@material/ripple":"=12.0.0-canary.068fd5028.0","@material/rtl":"=12.0.0-canary.068fd5028.0","@material/shape":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+xI5oWMGL/08Z5IIbiGSaS2/YtiICFjktyneZlfeJ84kFMyFfemHlzaEwFl2iWCj+tlAny0TioN5vgz/JzVVuQ==","shasum":"5e5a3007f2b5f50aeedddac2bd5245dbc17219c3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":16,"unpackedSize":76190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkFCRA9TVsSAnZWagAAH0QP/i4Qny47ydzE2wpIlmH8\nf1bSN4Qm3QDpDFOks8GJB689FeVIG99T1ZuanUhBntFPmp0I8/JKv4TBx7xu\n3heHBnPux1IMc16DqxMEYVjCz3HuGn1f9awAHwoMJf1ZHYD+berKMjSOKeUx\nlHBUV6MW6afTNyobuvwwqX9qVCaN3rCMIiFfR1hmIZ8zBsq10/O00VnlvLBg\nojzPWgBuMw8iO7DSScCa6PiQHFOj1pOIaUjNaKAOH7X0sueGuEOaCmzyPUnD\nVgFEdEB3rxk2PDJh43dJ2W3r83sJV7OkT5HLOiNsc2xRFyruIidLAYOwB/sv\nM1yvC80ab0mz9ywswDnsE2g/CIeN0FysuUVcwa5eV0h6IYg0PwWgasrXVOhp\nvfth5e47L07QHA6Yx/TqJGrWwios6zk7nx7ndklPwyVtdxKuKU4cCU+aTECY\nR0+bWjGdx+UiGYQOOqlKPPa5Dm+bzdqGQczFxu1oNlcyQwMrbgTyFA0je295\n3dG2J3D5beyza5DtnBGcmni9yDGWCBrPaUrqLexUq02kcsRFIzF7fFZ3J1c3\nL05GEgPFIVQS2Nm09E2/io0gOfJdwv7LovM9ct0pE3uLrey8kzwmBtGFgaMX\n7O9JQQeO1IdlQsYLaXPs6Yp6kDBqKkjp4n9Sxa2tqwgObPd82kfzqizh3+c3\n2wuc\r\n=qNHt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJfRl66CogXCTFl7rgsRsLaXDWzAYfCJGel3WvNf/1GQIgBWYf4YZUMNatdrwQi11AODH4HKMGiTyDgc+8V/jN8No="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.7ec5f2d6.0_1626110212681_0.5190069550687326"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.86cb4ca7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.86cb4ca7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.068fd5028.0","@material/elevation":"=12.0.0-canary.068fd5028.0","@material/fab":"=12.0.0-canary.068fd5028.0","@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-icon":"0.22.0-canary.86cb4ca7.0","@material/ripple":"=12.0.0-canary.068fd5028.0","@material/rtl":"=12.0.0-canary.068fd5028.0","@material/shape":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0","@material/tokens":"=12.0.0-canary.07a73750c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mqQ5/g4IhK98pbJUs5ZXj/SGA10p0LBt5dL8jxB7vt8GA3hCv80rs5YxUMei/MT+KOfWd+3OOmaaZmto002BbA==","shasum":"01d40b98977a5b88034da0c85f86210c9e6145ac","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.86cb4ca7.0.tgz","fileCount":16,"unpackedSize":76324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9mCRA9TVsSAnZWagAAHPQP/imyKiXQKZllXOCSLR9S\nNG/miPoLZER5LhcIjWK5KTBdLcio6rD0EBZDuLrb6oIVtH1ipBdiRmmxvk98\nl+bKSfUvjU6QaMm3T6H0fM+E90QwnpftnNOFnGLFQ5Ebb58w9yvOHmKC/lQt\nb4hTSX5LOfvxhm36EeSt6Yd/1FSLqbL+c7CNDMye7xbnliLJiRbczvDOis9y\nAXnr0a/kLFxwoPH3DhKa45NicHNnivH17XLlUwcuxEipCY0WoAvSE2jpJaF2\nAA+d7/cHySEjPahTOHY7CMFI5lsgtthXOLRhrHhQjm8XttHT7m/laluNu22u\n2E6MDcalPjNU0zQcWNN6rHoSy9f5sGIy5aWIcQ+RodkZLfwHux7iNh7h4smS\n8vydegPP0i6vGdRiE3qmCEeI9UpZ9SYWJRGAlRtyuMMYrHg9O+teRqT80uUu\nXF1WnpF14TdfrVMi2LV9cTkND/5AO3R/lIzZ/QIoxiVmcf7CWvWSeWp01Vgp\nKTkGKEM6Fjm5lsGJ8AAIreWiukleHunrt0NEVDL3dEYfPzLd23GVGGGZMzqx\n6mskrUD4xJfkUfBYZ2THMWZTklm7KluCSJOLN1mGGk8J06GHaGPNznlB+oh6\nqW2AtVTKundPMOD2GVlfHnaxtGRFvpEfsJ/5mMsy8lpGywL2H7zagACNUdFj\na+m/\r\n=F/EP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3ZyLJflomkl+uOZhwZZgZS4Wpl++5XYL/OQ4Qbi/4yAiAUH8/nLHJmPm6sNxiFDaATFbnqPAQyLHBMygSTkdvvzg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.86cb4ca7.0_1626197862307_0.5122137674815015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.bc9a724e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.bc9a724e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.ea77795b1.0","@material/elevation":"=12.0.0-canary.ea77795b1.0","@material/fab":"=12.0.0-canary.ea77795b1.0","@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-icon":"0.22.0-canary.bc9a724e.0","@material/ripple":"=12.0.0-canary.ea77795b1.0","@material/rtl":"=12.0.0-canary.ea77795b1.0","@material/shape":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0","@material/tokens":"=12.0.0-canary.ea77795b1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DLoORrkvzgfhTcirJyIowSlDLNHOocCZbRnMSB6HvgaBL5/1xzM4D+EX4DohnVLszQ8UpwfZHnJ3jgDRuJM2pg==","shasum":"751583fac6274a49a56a70452c4863f3dcddc6b6","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.bc9a724e.0.tgz","fileCount":16,"unpackedSize":76335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6BCRA9TVsSAnZWagAAY1AP/jFOKJtI7bqFv/BcH7Lk\nZTW7ThPj05dYryHXlxwpsHWa5URzGbPSo05H8RMcPfu577CtNSgiMEoNJQ/+\nIP2FEKIRSaEm/2GPWeFbTwSMnTpeaekZaxNvwnRnR8WUJIVVlzmokDftC99b\ni9WChWkk3v9Hp9wTzgvfoP3VvFqwtE+UTscZi/y1Q5QHjOkdG2Cc8hc27idU\nq9xgmv4Okoo/4DwO+XjJ7o19lnU1m8JLlkivLofskiqGKJ6aHtpwRKHRjZI4\nLVFBepoe4i909tBILvOg8Jiy3W0TXYzSB50Q3S8Uut+GqbNkxbVn62Cg3m2/\n3oLV/O5juW8CR5FCigKaPGUDsNqq09XpN6HMn/eZ12Y8raRIqb2XOGE+q60A\nrEO/3tEX7SYhHrQ0WeUJDXCvo9QVzBZO98zTUQXc+frr8QhaB8g4xTFx4VFo\nHHwB4P5/mVhbhjBJCw+EHJ77Mx9fnBGGmJWu7RzfviqZdLenwzfTp/IlrEga\nl2AV5PKWm+KjhjVUDMkCBMSKBbvnUBqzjhZDCybzS1T2bkdZx6g3PjQdmmd6\nSalLFXEqWgd88OCXJ8xPxZfXbwp/ClJQp5vz6XLMhWjTkTGJ0y79j0EEXTvi\nbW4CFSJ3sGCf29k4MuD35EnIltmutqJEnIWP0h2/CUR7C3qtJ1UQTn9KyYDp\n+aIu\r\n=BpiP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4ENgzwrNzPoIfDg8tYa33lr3DSOhg1Zd9/rQaB8DIqgIhAJ0xQncqPmU08vHmSmq5V5rvKgglvTgpOpoTUkdBxFA8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.bc9a724e.0_1626201729473_0.2616340975611584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.7847b83a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.7847b83a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-icon":"0.22.0-canary.7847b83a.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gRUVGUmHsEgRrY1linCp7TM0Mk17/flvLOY1epqUSZlRug1saf23Ahy81ymeOoi8Rb0+DCFZd4o0QSj0f2nqxg==","shasum":"b6ab4896a9f7c1e6d77af630c405d28f1e56ca61","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.7847b83a.0.tgz","fileCount":16,"unpackedSize":76335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xx2CRA9TVsSAnZWagAAzlAP/AlQAIGTydhP1Nlo2f4z\nc337h0hG50Z4IvxP1bQssOJ4TzKtPSvYfKzQ0zQlGV31zH9ICi8rv+BPOTF2\nhPqHm4wYFR7Uwvxy/pcbIMq0VFDCrZvgcYfssSFD93mj42sNR8QgwVUu/uPY\nHjKo2mHza8ZUUyILx0aOYWflz2gMb1AK4KCX1BjeI2KZXoGgxTWMSoLG988X\nhMy5xkRpZ0NQnVUD+lJEDWZtFbDg0DLdYyJgpcATKWSucU3OlixbQ0m6+dum\nTm0Sjh0CbRPKAh7XbH5vyUpXADPRpoHOqCxEend+lXjGwDkGyc8muKal5y2J\nRiBVIA+T79abxA/xWrwVC9ZSXeBmreewpM4fvqr1AHWSdKSukfwR9BULrWzF\n3s98N0obw1xIsdlzB8Z2kzx+vBKsG0JndT9Bv3Pmu/tvNp22i4dobhV+LAan\nmbGTQjUmLBQp52YyYdSVjgtyUt4PzEdornjhxpOah1G5V9bGaeyleqliQEwL\nnxgXacZ48IESvzR7QgA4swXk9TPpucJguDu+BlaNxVazesQG3Ney+6bObGQs\nr4Wu5JXwdBI0owcvMcIfHVuwlyRXhED1QkgF3SVc+m+aZUrnasRBAp7/RpGS\ncx+QT6ZER5Q99hmMQYnSjrQxYgT0moAUJBaJ8FJeYKtZopknrSFQt96ls00u\nRdge\r\n=AGLs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHN7LuDM7i2KX7dETowyrJyphZF9hRKlRwa6lTCvgKxdAiA6CAtGpQ60BegPQZLbveIEHW4H9kxCIodclmw4/FsPrQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.7847b83a.0_1626283125647_0.7088602209143373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-fab","version":"0.22.0-canary.8cba18fa.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.22.0-canary.8cba18fa.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-icon":"0.22.0-canary.8cba18fa.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jJWOK2kSrfCze5eGDFIF4VNotE6hZJxd22Jo+ghJAV8XXkk51tOdSv2VqnygZ1Go0MKKuOBQBLTH/hX4UX4uGQ==","shasum":"847ba07f0e41bddfe9c130ad638627f0914aca80","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0-canary.8cba18fa.0.tgz","fileCount":16,"unpackedSize":76335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70iCCRA9TVsSAnZWagAAlbkQAKHvF4qUzWbCJWd2u37G\neiHwqA4/J4kglghN1CrMAmhM7iCCYaflIMagYtWMGBw594HcPhW7AVFiuXt5\nAir9tEZYUxsAQ8BSS3YJC68QynmKHs3mWc9/1pMIxo0PWxokDoQX5D7Cvgy+\ntcnRDdNCCMHeEL5RTzwKmNDVqQb/lD+9uhgHCQR20rUD/KgqhbXPW5qZpQPL\nOBXAVdSkIBANBxjSiAQiOeCQIXqXnDATJ9PNWDa06wAPk1NUTby21hlCjWyg\nnyBop3SGNQijYz9+FDZbhsqtK0R8XhpPCGTlr0BDIG5IIvxRMyeWhZqRoskM\ngUXPDCHYScyO7wn5TN/kgu+pJFgbEbq//xSZscZqELw/ieaC9MXVITZmOgGZ\ncI5z4PNsgMuAEaj7q3gt/TdKrMatE5tITO4FUAeWU6X1oaTWlyanwRDDg4i8\n+36PyxxgJD7ggPGw7/qh/MCGZ0omlsMQSZAX8KKRLY0F7NyBKIXEnFA5pyhG\n4lqjaFJ3vAgZmdcmieXva0uXBRcf+c0k/lq0LMSgRSKGYepZZsK11heClDqi\ngqgTftPE/t4bM21TGTDpGn5xose08Ps2d6hcNA3HqCnF1yBLOmiJZEcye3nZ\nn6UqtoD1lVGrMFfNjT33M860Zc5Lqog2cFsBdhJPe9AN6W9iVxNLKi3al/A2\nemmB\r\n=WvXH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFhE1rIWHTk74OkKe1PZr0WVE3BiP9+FjodJeM8FFF5/AiEA4vz8cN/QBai8WFZfva1/2rkOnbLwu3FWClMNFBhOYH0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.22.0-canary.8cba18fa.0_1626294402097_0.7191820423182789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0":{"name":"@material/mwc-fab","version":"0.22.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.22.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.0","@material/mwc-icon":"^0.22.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"cacad1c9793ed32c30b99eb73991eb6c1218048d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.22.0","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-OEG18Xm9bzp1rNaBniPqf4NOyzx87mrkHiV/hjJWZRurhTJiqJayUqMmzVZqAb/L3/i6eWkZrA42jG32nEnhsA==","shasum":"5ce175153071a3695fd9e6226e106f697030d489","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.0.tgz","fileCount":16,"unpackedSize":76266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72eACRA9TVsSAnZWagAA+zQP/2YbjxJ5bMwOe1gbjf/f\n1/E47TpouZ7+teXSekb3gFLY4IK33WmIVUbGReyy3XytkYchwgjHWc78AXzn\nkxt+Wg/5dEwrL9HtMRMLdr5t7OywaFCbIdfUBuSts6knynchPkTtOhCExPvO\nfYuqOb5KTyzYHV2oHfgzSOYNnSaUHsWJv7StbRtdV9uhNBN6Dre0LqJTS9LD\n2st245MBDxdUwU633FSkcJwcYdbQVMMIP8o/mHx2GWur7VHxVuJusNHOGGtB\nt6EWVtQgOMakwcoeFkT6T7lhDzP5o13bj7eAyPW4lAhSYnycpCQhms9tfHDj\nxfTJeWGcZrT/EAS2Ouvg8jqRv41Gro4/d9xUnJBUit8fuECKXgZyfjZipUAV\n8GEdw6yJc79SqGKe+ll0WTpgWxagZg3WRBLALWTCSqXKLD1hpk0vHFrspmTZ\nnx7y/DTAwvUsUAU91DjqNTgpj/Vf4SxIOgDzfU6YD0PXiE7BmxGMybKCxlOm\n2I4K/oh09pxZ+TwON8AHLjKp32fu8MJKj+MYWTIkzUt1jQt4BKtXk64YIxOF\nLUMWu/gWBQIfmAqarvzVe4OTU/lbkSaMEpu77THoDrrE21GRcq5e0C1xI9Bw\nzjQ5vkaOkH58RxDR+8zlUcbD8EBJ64ci9GKJhnQkspfaMiL6uyICcUNdz3V8\nK//d\r\n=/G+W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHK4LdbfqjpBApi4Uudy9j53Kb49wgSjJN5Wav1ecUzCAiEAm5W7nbuZzkyRh6EdVEnldVHVeeHGwNtonW8W7XhGw90="}]},"_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-fab_0.22.0_1626302335547_0.8857583938959621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-fab","version":"0.22.1","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.22.1","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"^0.22.1","@material/mwc-icon":"^0.22.1","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-KFzZFFr/Nq3bJ0JJyEy7SHsvVLhoqMCTELEjcy2s4fZYT1mLUmHK+Iip1vuKP2I96Yvnym4wkFEcwz/zAMCWbA==","shasum":"4b657617e568c7bf7aa4505e7864b9132d969a2c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.22.1.tgz","fileCount":16,"unpackedSize":76266,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rFCRA9TVsSAnZWagAA4D0P/AgvGL2Lci32fPUlwILd\nLll37ugoO17iaFvvKSO9xiEiVlAWS52lGefC7jadBdt1PahYsYg5qRVpRfST\nYZ7XNjrlXrU5goR2sZFnatSZiD8U9tC4FsTm7A9tCwDV17mfJ/XciZMy79Yn\nSmuAJRpl/yzAa4/7rRoFzf2KobkhJr8lpASg6+evbiWqJYzx6LzapyTsVXvl\n/BZ9XpDs8UNMEV0eGBURvXJJLyi1OeC4RnZeHiPv0IAQPkV6Zr8AKSrdPc3J\nuP0GeWWZ+V9dX8+6Z2aAIKITFmh2tK6O0+979xaFr1cRXF7nRacgUoRoxe8w\nllkK7AEWJCizfIz5ckUae9/HwCmzLvzbOXiesJuU2iM5kb2W5vMUt7WvmqoI\nfVGxKltWUBUZYTDYJrMyqUlL8yHGuwiLuSl1XC8Q8KnzLUE897Y/QhrsUUCZ\nXrnr5CjCG61mFDyLiRrEJ7bECoA2K3IKlJbSxWu0NKucuNAuTEBRY5/qTLc1\n+vIo+erHkkLIh4p1FG3NyxrbipZsP5rMZhHFiIor6AvwpbH+JPv2P4ikKQTn\n6zR4LwPpwLPwqc0apFIzkzkqqLr2JLOx6ruALcVqeEHtwwhjiAsAPosW2EHl\n7EsL1qj3b5Hqmk4WlfjMDkjOqyHzGeErbOEkJdDV3xNZYW3pKOkNx1MfXD03\ngXfq\r\n=Bs2r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/x2x1vHocSaxBwTFNZQdMhxjj/80wuty9NHEJ7kOtlgIgQj5g0kJu5aw4O8elPfMccUde9ahHvUAz2QwL2sNgBko="}]},"_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-fab_0.22.1_1626303172852_0.67966464308668"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.fbc09b4e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.fbc09b4e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-icon":"0.23.0-canary.fbc09b4e.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MCTxMrQvdc53Bc5XRl36bPYH17w1VPbTzZy7/xoIP7PMZrTL0MUCntPG69QS3mhPP8uXsYvyoWxh1K+HhBOHxw==","shasum":"7321bc28a6f5bec2f8fab51cdc28be5b6c2b641d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.fbc09b4e.0.tgz","fileCount":16,"unpackedSize":76335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72sSCRA9TVsSAnZWagAACP8P/2kHBYAMY9V1sOZF4IYl\n4UNHqlJa/dgPPP5eJYGcT1Vwsq+Q1VVr0mBD7CyXR8rt3vjfHm+LgL6a8k3x\n5LwuMOfgSyvUkq+wVXf21GbcivDUv2a9Xic13oRVj5frUemxvoJyqgkN4htH\n7Qtw5SshHl4tcCYdAmA5vGevL7EtsfNmKI9YpovfsV5NXUNHwyxKVOSPEjDT\numOw7ln6PMCM46kHVZylVXMUMFB7yu/cQEGfcqg092cGCvHl6dO6MLIHRQaL\ntC++bpdHo4NqoQ4Ky6THmkmm4c4kcI7b750jJv4HXBeEpfBGnhHYWzhMkhnH\nrywPlwM8p0jMwi0oZ3i7dl4fFYyTz1dRzbRGTq6zMnW8ERZNwXkrQeKkHDVN\nlCodI5kJiAvXzN82dsYJuK0n1uKpKi7uiKKwoOtAh+CD5+zwP8cU/ElNeh6e\nO8znDnVHwo2ESrsmHGF2E9DWjTuWKozMxoPQ+Aj+y7AfMPJKENOpLLNnyR/T\nRHbC5Us9p3T9XAgYn5xyM/Q5a0Igt4jLXeMNC7oVnU/2vcjhUkKGr02qImEJ\nFnaXokmeRCyg6kV8LD1o/b51TAYed2FGYC++z71XrFYP4SSfI6U/DK+T6CwE\nEOhAsYjTVE30RaybTnKAfJ4zHJ/fQv7DCRWxR6HRD66krf6j1EI/dpvDShzZ\nPl56\r\n=Je+i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYtLwcBUOuYriodwno2sI2yAZ3k+VIYH2+BQ8tMEBC8AiBjiFrlta7Hkq5ArFzyypIrZBVgJLQc3wrMX/30fzS6IQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.fbc09b4e.0_1626303250437_0.19648888335006087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.73e9f83c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.73e9f83c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-icon":"0.23.0-canary.73e9f83c.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Sry6JPS5dLtu4UZOPnTOvzusuF/aoeZb7oovI1RssZgidXcJKMsXSOPk4yaW6HrLB27fbogf9huxcv/EnogRLA==","shasum":"d88165bfd45bd3f9ab513328ddf6e6884c9f367f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.73e9f83c.0.tgz","fileCount":16,"unpackedSize":76335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0KCRA9TVsSAnZWagAAweAQAI0ZtghhW7hFqdPxxGPU\nsEib1Y5Y2WGEBH5e/77/B7SOq5/WMevdhVe6I2C02onGx+bHPWBFPfBiaFoV\nyVkkGiVWYMbylN/ipTZIrzn9bdtUsTE8Vp1q5yXP48NZb2ku0CtFMPsmyp/Q\ntvp27C9KbbDSBUhBphtMB8stRforQwEXjMVjpQaDLMdJzp90f2AuwvnZa2Z9\npVIWhSddXoc8wgW9PsVr24xjb6P3HiiGfCfPIriOhgoKE/LOhiuWnJDFVPiT\nAweLYIocpWU5v8JR1iQY7np/e4M1p1JAVJieVH3Ysus/y0jCB7VlCgWd9Qmd\nNkMqzssCRjhi3Cra4/l372l7r1MG30Ki7Df6Jlj3Huq7BS0h2AwiZ/KRmHg7\nprjpQsos8y9q9Y2tRidkn7HzvIt+DZDTlUeu6acWapXy6BFDm3+t9Yl4hKWe\nwMu6JoaMwUuNRSJieNlh3KdN1m9pNhAHFo0KjhYvnxFzZy/4FegUal5WKz9L\nrMK5BDt0QOnV065DYAWfvndIvRkPiwDtQ6c+Dy7wbhWBkQLfiUPBO7GsjJOi\nUIIbalfnNjB/3fnox0pWHAE9wdjObOWfoz6OMEa9VeQM8oL1/dD/I8v7yWCT\n15+QjrYYC3I8o1nNYXKf7v8DIOrunHaFUShMVqd66TqZnK6Su3cwS+wHWu97\nC+hD\r\n=MpJ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOav9dNqiTH7FAtyXdrVsft4/HYmTX0uXJQ5hkSocDAQIgG+NjTxwuYHzg25rkrTykUtebA+tVQ+HpT0XK4HE6jSQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.73e9f83c.0_1626381578408_0.11672690435074573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.cc0aa7a9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.cc0aa7a9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-icon":"0.23.0-canary.cc0aa7a9.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mgXClb1Yn1XolAxR0jtgzB469QIYUjpM1Vjqlfwd0IQYY6sFvvfYo2kOEg2BAoP4Deiu8i4mckWPsCAgjfWpuQ==","shasum":"34c8b72b3d10e72a1820feac45d4c0376a3b5f82","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":16,"unpackedSize":76335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KK1CRA9TVsSAnZWagAACH0P/1KoLGEU478CH42HU2hI\nMRmY+74yDqCwsrLsemsvrLgsRgggUx6CjP3PF3gVYeUfRgVPBNDpkiU6OWKl\n1ybARHXgT0jjhVVNgdy3XNcZNHVSoVeQ+iGfU8F3Di9oH/1LxMa1UaI2TAr3\nacLTTLySTAA0tb2xkr9JxmnEcQ/3CAcaRRVP5Cjm7wVBi4M25xs+FQOgfWXI\nKKKdX2w3kk518iorfiNeSs4s0d/CF9fvRxb/vLPlU2TeJICWVYS0xFGe+vdE\n6mG8kC0V8LTl4BneExdUdzSU8+NwtqBFG1KDa0XSYZDzTuw0bJADTcooEuVR\nHfpq3sQfNZ4IJ/Hs9O42LRZSi6VzXTY5t/47fz1WTKHqMgYaphdMGsF8iRak\nHs4s4jTSP3J0HXnaZzth9Gn5J7O8bLUlOf+jaGxMll4tsg4dH2S+vhnYeOKE\n2WqbqcOolYCVSHkTyzZrxslEFf7Of5vN0Pau+bN/8QDhp7Sbv3uAYNXfsXNT\nh7e6hK5NtNAsYM1zlZA83RXQZ+zi8wOQYneJQBG86XZ88pe+kJIdqFRTDfDC\nJ6OXiJwIyQXxv3x3XAhaHwzGncloAVZi5T8oOFRi6NScZVxZ3eSDxdyDZnzD\nv1Ezo6F1aF3767Jir0JFTanTLTjgiLt5+0Cb872ExXUKA9yNrdYnjc6y4y2Q\nP5yR\r\n=FJXS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANlrAuLbOAvBwkzvMmxit4ux+0NyO0eYz+nWQUsvZsBAiEA/L3gfMFDRg7Ya95rbwlerICHIOTlQLjJzBDxTejZZKM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.cc0aa7a9.0_1626383029019_0.9238910896461472"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.a8fcac45.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.a8fcac45.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-icon":"0.23.0-canary.a8fcac45.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pjQABZD4qeGHbFE21/RPhiqu253u3HKTC2a9q/43B1ll3lTf98Aq4H9sO+gTcmNOfNDvoCJ8xtV0F5I4hQ4eyg==","shasum":"26dc3fa31819350178fe515e96663d89f8817242","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.a8fcac45.0.tgz","fileCount":16,"unpackedSize":76335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KckCRA9TVsSAnZWagAA2EYP/RP71eYT0KzB975PYuh2\nfKjCy3xe5WtZWeIngJn3wQ8Pg68EhJ84g0vM7LHQYabJLVf9Ff+aQhQzZelH\nsQ4WdH4YZvbDgTpilZP8aVsxX+ptBhHpL9iVRnOywdhgK9UThls78o/10fpR\nBsfrNc+TexdYlGJgFpdTm8aWyQ0l/q+AplNdqv1WO7uA1gCf9U3Uqe3q6e9k\n9ljtnG1gjQBadpWS4BYSij0hVLLny42baIJ3aQh1Pc4Ra8Zpup4ol+mm6+E2\nOCVYeIGCKzonFCDIyQcDl/0nEOJilWw3+RVeurn1YRuTRakizn4atEme6az0\nQxPtY2RitQPr0ZGuLSvL2ajYxH4IO5QYNJE+Od0Ea3A1lbJpZBmryKKCNEtM\nKH9YhZCU5pIEsjNKxih5uvLbAiC/ya5TiBzuhuhqkKg5/Y7C3CW2ArXSoFRF\n0DOAIVF1a+ei2HcuI5yz4eGSAtIooaL/FVBS22j5NECpSd7oIeLcMYuxEWEr\n4aMlM5xUVQ0h7jzh+/HEeAtls0ZBqyK9mfObuHSQ0Zbk0KgMgvehbDCwUjqO\n9eBcVIWXtZTKl3qNUwOm80O15ls3ww9Q411o91KTMO/gifIlT+0SYn9+WtVu\ngtFx3E+76p4EY+XIO3rHa0RHGWorlpGZkWu+DWRNkdFv+XbfxpPbpg+TAAdL\nje7u\r\n=rkcp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVlEPp4BWR8xQ+n8dJ175eMnZ7GMIxVV+PyEy+oPKlGAiBXF0orPLceeh75s74vUVUtw5FqUpJWOiDfVLnfAm1BHg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.a8fcac45.0_1626384164136_0.671820108964309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.3ca580d1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.3ca580d1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-icon":"0.23.0-canary.3ca580d1.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CyykdOMthcjp9y4ykWYqCYs+/gSkKWwl+OFh7ZJQNDNWhS4RWFvCwuwS1dhP0CN60rCFCzkzRvWY+sa4olkYOw==","shasum":"abeb4a4aae9eb3839130c6a3ef8a507ff21efed0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.3ca580d1.0.tgz","fileCount":16,"unpackedSize":76335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDZCRA9TVsSAnZWagAAYtAP/1lPf1qBwqC/nwVQRaOI\nXqEt8pky14UIjZY6RcEKYlCmTtmeGYbxUDjrwVL1unpo3edlwMSAmmB2TvxI\nZ6oQcyScy1hPXPaytqGrX1XjUsZm9dX4K94zPTpmjPXKfCTLpFFR7sMl22XC\nLUkMQeEW9En9dSDkZTkcmHfyakW8578a8aVKFyIC0w6LoLrcWFM7l4GMawYI\nKv4893bCT2gwswzC4KkRCnU/zRAAh9BuVeRyLWOMalZzfNu1Xj1cBnRTcrEv\ni5i+cvERS2TsV3Lkf57vYl93CBvx4Yc2GhEmegOZ5UHIJsuoqYCkJbjP7qUB\nj5oqgEcc8YVdYRckH6SD04mdVA6j4GTOsL0LxaS46TYT+5vZW0VB0sUR9x6g\nT5Qibc9qbmBIl8XytHMKr59ukTqmPzoflJ0McEXyFZdUx5dZxLxj8+NEuFNa\nBCQGHwtygLgGFlzlTXUlsNZmhGiOLDdFfE4pFvwobde0dH3jyHcRyyUv210Q\nLqtGCwnEPfPh+RlCtIpXDfvl29FOn+8+MW8puvGTExZ7DnEs3fgS8YQ5NUVQ\nIIkgisI61NppAljCbU2Eey8lCxjsNRoO6gxpREmBeJ8GmQ1FCUQBD1L3Yj0e\nmZ6FFlAsigUL1zq3EMwUDUVEOZ1wrQvHCn0GHHyqEBPCD4qo1UOwM0P4uNoj\njtrK\r\n=bZ/M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG+ix2ODiuOELwzWOj3e+k4+qwF95s8PwOcCE0+c5NdnAiAtd5NgVB4llx1EXUwNMjJ1QcgzJT4O+l2OpgIOTD1TYA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.3ca580d1.0_1626386649014_0.8082195126916121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.9e41cb2e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.9e41cb2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/fab":"=12.0.0-canary.22d29cbb4.0","@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-icon":"0.23.0-canary.9e41cb2e.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/rtl":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0","@material/tokens":"=12.0.0-canary.22d29cbb4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4BxrRLKM7e1uT+NAdTUcxsDkwzBX3J41m1Dy8igRKNWYATzokEz+4a2YwaF9PL/hO+pLQVRYsxrn0zZu66yGTg==","shasum":"85b97915026dc7483ad0b6c40fca9448d6d32b6f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.9e41cb2e.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAHCRA9TVsSAnZWagAAhnYP/2WSMyKqLAZVutTMU9Fu\n+/BhXWdh/VndLFYs+dGEQuycQeuVM2ZaxPfhWWFfEH808cQyry06lEBqEzSJ\nk37RQBkz4u7hRKKG0QP1dXQwlezRMUj/EjMvkpdIiQXFynksdAxQKidIFh/a\n4dTsr68X3Rm6kkswzT7i6quWjeo/xTfVtZpYa9E7ZVKNqaFbJVJWcUxDl3fZ\nzcShPPSKhf950h7dYNZTSJySrG4RO07UjGf0OFFKzZxHlFMJ64sYaFGZ6XSJ\nMdjE9JWQN6M9c+a396nrYoyQq8yVGHswq1fYwyI2JILweNaD3gX65cIz+jzr\nv3NvyjMQiAeAraa9Bekj0eltg5fRsZMsfBh/uKP3eClZ9OJQrnYz6xjpYrzZ\nKDiet82bXW5SRU+R1KTR+ygMuh9UMDFbOtuGmOU8Si7hyTYHPYc6KmlquvuA\ntCb+2ahwJIY16UYjwMTGQYadXEvhcFx0NEAlA6oCRMC7XfCc/9oqDXgE4ECb\n0au79noyzc4QLrVA1o+gsKF7//n6DCEVsHbmbpmvBPG8eVQh8dd2gSVI5O2y\nltq4xYzgZ0lBCrdwJFVRNJ2oKLvTv/Iax+2lALdu0Ii2xCiB4Ljj8ydQxtw3\n2kha5xvj9NlkhvxEVtB9ZQQN3cICRsIY0fABs2neMe5wtGEhesJYx0EdxBYv\ndMIq\r\n=hbLR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1sIMOpxXcII32iwqcm4hodX3tUs9YWmWqeIuwcXMjEwIhANu09pclOLhID0lmsN7AaIS7IAdclJSVP6SCGmSBqZuD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.9e41cb2e.0_1626390535630_0.06966919904262925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.c180db74.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.c180db74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/fab":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-icon":"0.23.0-canary.c180db74.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/tokens":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-23c8+CJI1m1Fs87GMkZntj7R9wtmexrLGNMDrFUPxU/BvZxwvTFVWGcBOyB9vEZs7fpXbw+rIo+E+lO/QaX8UA==","shasum":"128230ec4ee3e7d8797931edd48510a85b73c8d2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.c180db74.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDzCRA9TVsSAnZWagAA47cP/2NnLhr0v6x/8yNou9w0\nEQtW8zC136UGkhUaJFQKMuWQbNuFGmMGOJgBPTrwbkuvt4oIIc/gNfY037TX\nqO0CKMWiDNhj9RSbvKzU48IwyThqhvHCxnZvQo2Vmvm2XSfb779XMpYaRegu\nTeQSctKY8AnYwos+vr12SyMrV5TFYgRDsTlg9wRaGK0UAzfi0swlHWzqGe5f\n1jy5v682TqlJHLlH2rgQw9s4YqOr3VDcmjsg+x3lKW6GYnBspuvqyl2+dbek\nlfrfd/8BSimYt+5xpkBHr7qpxfw30oJU0zPhvfFGGw1XHUH825JSYCLaOw1L\nI9dPY6G51pl+p5qmyXXTOeL2Eyk7MfneoPvd+widXy6oIpoItPlHbQjisLvU\nOC+uNMJ9YoHLTIA/+tjYTg/wuciXX384rup07uTUTl1+gWCIJU9bgSKfT+9W\nZdnjfi1QTo0JuEibvn4I4QkVb+JxYny07xjcFbg7XbXkdIVvUTqVne50yem5\nIPeSsicvMgPPvgEscp+kmlrXMjIiqg/8M0W5NPFJaeOMcj4G3J9oyXj14NOQ\nQWqTBAX18bSyUbJlXEOiwlpf4om15topIVmAKG+w/IUCc/YGFNV1FzWl6MfV\n5kMsLrSo0ua98WAipI5m1Bbm9De75r086yCc3Wgpt8vVu9qqxnAljeYY8vGk\nM2G6\r\n=jvXH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMpCU56IbKYR1lCdevLpAd33pD/pumEO++hc7nW8BU+QIhAKuYdAXcFWa8hJU+mtZ4XloljY2xkiVVkQYOlCgc5qAg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.c180db74.0_1626456306893_0.8176678618992148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.0d0a9267.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.0d0a9267.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/fab":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-icon":"0.23.0-canary.0d0a9267.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/tokens":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HlSVPQwUZ1vH0zIXeGIAzn4PDlcHazY0nmm0JzUUEGO1sZeZvzgQ3iM30TeMxluYCJXlokuT2Q9mT2tAGtHEQA==","shasum":"d959edd2e7638eeede64a33de972960139313048","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.0d0a9267.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ciACRA9TVsSAnZWagAAByAP/jjvwMs7J0GuGBavcLD2\nIvdrpINSZ8gGnRIG29ISBaoPf0NpJwOw8EQBSEKHeQq1jjstWNzUm6fKI55O\nmlCgiq8zSGCjmG8J+N2uHxmYSC/Zu65/w+wTJwaroK0XnMQIUJ5Hnhmqf5hC\nSPgSw8gSB+cEurWFn+md4//p+9QnTIrKDt8V8IYJfJwymTSUgKSYwKdQJTRL\nC6FiTqtN2HHiztRq4Vemt6RCM0fJ1ACV0OmcU9Gs5lENN4dfnz5EHRVmuHlm\nI4TL6FISIa1Wg0InISWZN8HY3h/IRmpyXa0DuUF/iZujVgKnycjj+e/sKWTb\nPg83u9/UikY8XKNPfWbr6law+dMZagIXCZeBcEZjqYnARK6OeBjnDcPF2Qfo\n2uR0jSGFrqHh1Qb6//KpmMTzcbyUT1QTiKlrVKCKGa2wvvtRxypJ1HFpLgV8\nHIirCrkfTlIzCmFufcOno547gHtqXeDoOdoBzPlTdiE3+PLJjAikdlcoWQiP\nGiPyRzNWudhgmvBqW60Aoep9x+4Y9nGr7etf0j9vFGpKySehh+VcMFrGFUi9\nG3C6Rarjj3WLDfVQRzmIimBq4JLj8mYjSTowKmbh/pShUCA8L8vNoMufa+GI\nusk+rhcVT8Gt5d96iVA5qnQe915faGnXgpXC6aWsbQf0y/fDEQ4rZYh637Bg\nTj6x\r\n=YYdW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc/mlqZLG/9c2Y6yXLpCcnMAB/RMEG31ekhKFD1iWO0AIhAIitvz/IgWfiK5au4HNhZQBN5Z6F6FP3iu56zmAMP/ba"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.0d0a9267.0_1626458240529_0.3196823784200098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.d234ec3f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.d234ec3f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/fab":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-icon":"0.23.0-canary.d234ec3f.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/tokens":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8HcmCf9KpIoj72sNCk/1m59vBHYasKXSxcgEQmW38Da7FkxVEqZ9xrkIY7yWXSApiKbU/QLy00kfTUKa0qvotg==","shasum":"5531bbd33eaa0eaab8152e3769fa7e40a64edfd9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.d234ec3f.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cr4CRA9TVsSAnZWagAAztkP+QAUNmLTki8BgLJlbsBQ\nlfhtGpElf45MSlJ8rGLJPdEyC0M2d2qcOoS/orA/vpQTja+HIr6UzwlguAIO\nfftNN60pBKKY343rcuxWwzdeF7AK3KT1FZM2+bh3obTIL+AQuTfrli8eZxGo\nhrBObkMS9ie+1vVype3YRtp6BEhqNgKjw8jHZHDGtT/clhvO4vmkdMvpPfv/\nb7hmjMYmjSOJx2k5U64zmn25oae8ShJU+QlBeKFTgeSWf8IH1CA0QNUGKJlc\n+wJRkA5s3hN2GmxfR4IxC7zjoddtG0+8BghOAr+WpkWVTj6s4bI+mPO+2lP3\n6jfOLDo/tSERLtGDLY1rg6I74sr4/jekngukKPeTHo6WgnMcrpfcOSE7zHfx\nlx8miawnstNcAXC3IF3zY8EW2W7QZrp9qRGC6ZWn5+LbIUdgqOjngY0MTQMa\nZOcOf48Nd4Jc2sFhDyHWv5Qb5F5B9JudSCy5akclLQKM3x9MfS5PtO9H8Eon\nh6iIBt7YV1h4YidpCClviKewHkpYhgxdmNfYm6mXFdehfuahw3jjmBEub74l\nDA23YcPWINYKsYkj+BEQbqyN7qP1Hip9EA1Ec3Pqzn/njZ14j2cP6UbnuG7F\nUpYgtZN2nm55ZaHciLU5RhyTu4DJtcwhOkEEqREtawF9eXN3lkAd9Fd8EVWZ\nG++R\r\n=bi4w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFqBMx6UVhQs8kxNMDJah1BRwdepGnizgvJWad3fIsYAIhAOQ0gmy09LnYr4i3LlTJWgaQTcShdrg1nga59/dmmVDu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.d234ec3f.0_1626458872677_0.4818474455419357"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.5cd4bcdb.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.5cd4bcdb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/fab":"=12.0.0-canary.9f68a932e.0","@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-icon":"0.23.0-canary.5cd4bcdb.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/rtl":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0","@material/tokens":"=12.0.0-canary.9f68a932e.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RxE2K5MDtQXks9z7AOpF7g3nKVLdgKfZKux9isW6+UtTvUHuryIRdSUCJg5nkZ/1xzYdanbPw3rdpST2XztTiQ==","shasum":"c91e3ec9617fa62af0b44ceed3dccee2984dd6d2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYsCRA9TVsSAnZWagAA0zkP/1I0e7/UQzWJnueSb6hJ\nSclCIjm1fXEj9bnI9mxvw4APjPLVr+6DyzeSBrAsFbUMNNgFg1ydTImpWDht\nA5CgfhTrtaaC8lFCsg8nEGTeU8OJIO8jeOs1N1/WDYe62LLhXPg2PHwgGxWu\nXI2NzF+9Bj+9lumXP+8SUKmlbaUtpYsYyN5ZBh/CPGsuWfFcK3rOPWv9/oiQ\nP77jaJk6rDVTDjwbaMaiPj94ndnCJMyOwHMAkkmP23QJcHwgTiGd5XvghYqk\n4iaUMpnnoMhWyUid9zliF3JMJvCoHpXjsbFPguqUDhmUaovjttoIi9qO//q+\noIrr9eTlmKw1Q0U/hYprVH0iWglK7trxS3Z8wVPDrLZfuiSwh6X6Pzv/MJaL\nSRvDX0y5fcPLQSlFsHp/+nd1RhLpBojP/lo56HxiKwWKjvLK+yCSdCqpX2cl\ndNW3Lp0MHU+duScAmFyqSxnqaJbA6jP0Qxb0dp4+DoEuv40Y3nWHBpILgU6h\noJSohWgmxjhVK4FT9JfroQ6/vtpCL00lTCZy6Khb0pd4UbDifO9HIUGep1NN\n2A03YwX5TrYJDvvfYgWuH4yyr9y+qyxunpyMIkxuwhroKLWcRBOxniNt3OMf\nWFCVLdZCarMdyuc/eBP0fcBbdjNI97bRSc54uq3flzvi4I6x2zdaxR6w7j27\njc45\r\n=lpU1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBA9ahc68IBv+iGRBZ/nXX09RBejhS9FK3Akq/+Hde+bAiEA9d796GcRRBOOO2TPjVg7rODrXiOISFw2y4cRzRj1uWg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.5cd4bcdb.0_1626469932241_0.12001392731705951"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.2b133cb2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.2b133cb2.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/fab":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-icon":"0.23.0-canary.2b133cb2.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/tokens":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yZhOZfRqtTTlojUZtkNEZ4bhahLtCR98CgGZblQOcHurNyOMggq34d92UBQ2RUfuc/+rN2NmykgCpvjFvh15pA==","shasum":"39d1c8f2c1bb9f6403ee86a508d09139f6548826","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.2b133cb2.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLyCRA9TVsSAnZWagAAQqsP/jLZrJaj+1ExRf2CjiDZ\nQco5FjkckOsiE1CkNHmmxT5BG/EAMklipIRCAV1THPOkaaXV2P9hPyK8RlKY\nVAT9B+oN6MKgWCAmdogFBJcdKy5c9vY7F+HEfTucuX6Pyqynl4mtFo5ypckl\nW1v05SZGajl/b/MovMibvXCCRDj2GhJu8+Kv0ql9WYwhIAnAiGSa0FTQiXvI\nLPtQbY5NprVqZcaO1r97fMtdMK/183pgQD6KcRF44dYTAGSZVvNU83rlZcG7\nfZz93OFGI2aVP3O8jlYue+sqW7jtgIkwyI1m+iqcyQHgmPZD+bpWqpWymuV9\njxXDxh4+GBjKbtdaEeuovwhgWXKI1aW9dQY6pl0rmixCDZG/JGdc7DectCV0\n37nh204UTG4LqhmIh09b5+bQIuSVqoJLVCDQED5oVEX/YUHS7pqLJfeY/AGA\n2Wkqx0yVGMPiE/Zilflhqxl6xk+bUi4y3nnkisLYcQDVmFdPpvNxNVnSchSB\n0L0kwPpj1ijwx50dQJ82m8JLTgu1CsQpZ4JAMY6lcCXylqPTdaqmBLtyMO+K\naUWAFn9B7W/pAIMDXvPJLx24Vu0cLx/NYKPGai/BY0FVDZZnoUTfLOMJ4ONo\nlpOfxQOlkZmPibB74olNhw5aBM5f0GwfOED+Yd94bkLFRE5QNvygvDs9ByH3\nPMzK\r\n=xfdo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAc8LUDAD0ENHfORtukDdWSd91uPMAq5Qxk+5EVh6wg9AiEA5bjbfHALTFxPEuiqE7LQLBMcjxwrFhaInYQws+pydWU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.2b133cb2.0_1626473201881_0.12744230275153412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.ae4f422b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.ae4f422b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/fab":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-icon":"0.23.0-canary.ae4f422b.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/tokens":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-97gKOCB8St0qgJ2NgZYbns6FYA2dYAwkbqiuTlSt+8F5nlcV2rDbx2uJNiMvYscwM9CzbP1w12f+G5eB7U5bBQ==","shasum":"8872d461f1c43da0809c02808aaee217754bffbf","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.ae4f422b.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwjCRA9TVsSAnZWagAAcI0QAINtKmyOhvtj6GfGCsdS\n8RVpykjlAY4Eiyhh46ou4inci/jjjCGo0HLTkwwfWQ0hC9Zuf32emPbHTglo\nAQyRMcw7dI4hYxW0cSJs9UIzPQQzihiWUT24xj8l4A9U9qu4olFhbZPi/meM\nl0+s5iR4fAP21egjJVSVudB6QoKrD0baYQQHeQlbQAC1j9cZgUmf8oDtuhBh\nBFN4GVkCpx50D5wsNvl47imDvwnC58xqr89rQLX4mRd8XZcv8/TWLvphu/yv\ne1Jc0ncpjmX/dSzSt2VTY62wkJa8AyFQDsGBCBEG15dEvPpgXlyd19l6j5wS\n9g1K6S/F53IAqS/7oTlQe7hzfKVDD4CITcf4w2bC1GbNxjCFqMfdEGUdoBq1\nTwVLKND5ZOuG9VoXcXDMFV7/dXMrdMaBa4uUj6zb45LjdVNw4xm20f7WtnA9\n2tlN3tgvxx9/7xVyBFX/d+x9REZyjt5Nb4qHeJ5YEeihEhAHmIBc7gQhSvea\nyD1usyMAaIw/8SBmMQlfpKcbjPPMxP015IYqE5B3S3PKjj2MIzs0lmWxkW22\n+d4Elx141McdT6PJNfdDlN5dHq3zzhoO8spvvPpKnazzFymgtQERKQV98/8j\nu8bCy2DD3VlLVu+uL+6ATa8b//xyOYr56q76AEivQWwbytzIUbyaOlvYPRy/\nbnXt\r\n=85RC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeRIlORwTbcykfQ9VDayVG9LuKpZN8P5GWloWY6NTOgAIgb7wMo8B2ZgXsdVb7B2HSin4EoEUrS/h4L69fTCCu+Q8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.ae4f422b.0_1626479651076_0.8753378435933203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.90ff8057.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.90ff8057.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/fab":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-icon":"0.23.0-canary.90ff8057.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/tokens":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oXvG4yfIVCmJMpcmYy63li/HINyjXtoxiq2yEw23kR2D3v2c1sL0xpP7yyVIcDVQ7Et9nBy8Bas2DWYdT1LQCw==","shasum":"d774c62828740fe7438aadd373283cbc8f20f98f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.90ff8057.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcwCRA9TVsSAnZWagAAs4IP/Arae5clWD6eY0QWVwRS\nZ0xmxLgXY7sofkXAiYBQnNiu6UAJgcMuwTWfDyAFRPdCp09o2gnrm2Li+h6F\n1lUnCfvx6KIPJO4/smjtrMzjX8B+x1DixO/CI9aNIM3SjskiS2qfdU0H9qWz\ndxzB5h23o8lEoN+LkPM1jvcHWDJxBo48fwhVWTn9Z8ijaEZ8VreLr0SQ+oIz\n8E52rF+rByIm5ussibcTolGRNakbmD/oHuNGB6Ku2xnkJr/sAlkNThQZU0IS\nH4LxO13d4Kwi8WV+B6VsK0DbWxzwqdlSHio0lgACAoDU9GBHMUUFSqph8cz1\n5lhPOSyw3qgx6bBvFAJDKcyHPzuJ7v7Y6B/uUJAEge1cy0nia4bsIXWBC+LQ\n1yjE3hewFnU592/Ha+aZLAGa+qDQ70Y3Xg/IPmcTYmS5RFo+kivNGVWNQ3xw\nxO+j+UZa7vGpjnrmG51SrSJc6mWa/yUoIymSMfjBCMRTsuXzJKhuDA1GJ/Q0\n1ILO8PFXAnMe9nnjygQgr6JH0bv0O+jcIHcdGyZfra0WSn0iS9kpPfJ+fJ96\nufSpfpnLJiYsocAoHI76i5q/25t53ZesuZElH6cKKV5alEWNCcbK9Y3klN1l\nHi34Msy/DMf2Rq0Ju4AqB0EXrLxLVZu5omRDVTkoky5lnEiKJna6CviLkmFc\nHsqL\r\n=8lmb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0agqY92ISlmHtu4jzUZUQ7dqAqOTMkcM5QQwtKfuqkAiBReAU0VKxBP1eSaP920K3fTlPVk79vTDnUOCGXNNLIPQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.90ff8057.0_1626703664648_0.12032993326802277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.dd7b75d1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.dd7b75d1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/fab":"=12.0.0-canary.4d95812f9.0","@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-icon":"0.23.0-canary.dd7b75d1.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/rtl":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0","@material/tokens":"=12.0.0-canary.4d95812f9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yez27zlaw2YuT1dPuiZZcAZ6s+8NBO/w4LxcsaULTjRGRBet0t7AMHl01oM+WIIQPaBH73C54qAaXpWW6vM36Q==","shasum":"9af114051dac07f83be5b09eaa4eb8cabed4ae91","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.dd7b75d1.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9bt5CRA9TVsSAnZWagAAcSkP/jSrUiqDD2nu9uahGhhA\nrdSuBG9lWhyjVs/XEeNE2xP5k+q134IMDd9RG6xLnI4HtHW29QrRFoKZbiqO\n8D01Wjk7VkVJjqC48MoVRqUnqVols92TCqnfvgg5JHkliZG8W7UCpmhWJ/gX\ndSJG1O1sdp91Dn2bAkURjliRID4lwa9RD5sSa7SYDYrpXmAcM1VtAxAMLGC+\n+TLXjFxVMCQ5r1ZeKTRumVrrYq2pPxjLxsgeXxf/fD3MJ5v8h9JS9W5G6JVF\nOwBzgm4QDNS40PDRbBzWvI14Lj03/jFtEzIjjLulYsYFDOLlCKfuIylWQ/gg\n7+d5ulBGovFR/acT/L7eneaLcBjCHtbdAgwl4yKDDsfrWSJnv9Tx/SLfJA6l\nABVuWKGG4vV5foGJJoqKfJ4X5pDAn9kM9nFTgYDkl3RlCCb8Xg5H0RFTPiqy\n2Daj0xsHGUbr3grxbszsY4YTK6oDLbXR9DoUPb+jt5b0yUOOXuFzZSNz5AFQ\nsnynqOYj+Ipdm+tWK/Rm3LZllE8w/3xFLzAIQYRY5H8ojC+sYK7Wi4Aj67UA\nP/i6MUYBcjU2O1mQroa9rhLCpKfSCKbDzqIqarVLbtJMCVXMxOgOhVbIzhVr\nYsDZbKLAHLFz2HcmTe4A20fRjp5lSz1R6YBXlYKVmTYMq1tg/YQJtnMTnjXA\nrn+R\r\n=sUMa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE23027/ifiC1c6XSLaiEY7QsybuZdog92cJxfr5oVU6AiEAxYoYGpYTUekxB4FhieQ0oW41CX4MXq/m/cNyRNTqSKI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.dd7b75d1.0_1626717049653_0.2080078548228368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.104debd5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.104debd5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.38d1846cc.0","@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/fab":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-icon":"0.23.0-canary.104debd5.0","@material/ripple":"=12.0.0-canary.38d1846cc.0","@material/rtl":"=12.0.0-canary.38d1846cc.0","@material/shape":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0","@material/tokens":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yeqlcAJJBhGN9DLrPbSqIW2GlqQqiQelHKw3TuakUK/TR0y50n28vdoTPlbWzoYKpiukr4FsjCVqjf5oQ+Q+hA==","shasum":"978a4de591868f0da1d2b20741915a3db39d77d2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.104debd5.0.tgz","fileCount":16,"unpackedSize":76875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJ1CRA9TVsSAnZWagAAG8YP/24nVaDwiOS+vOM2o6Ku\ncysYsaJ6Dmkdf0l7Ntqosq10H2QLUJSAGOimADr07DhPnF3Lb4APnRV0xc1N\nWDWEilhOrQHd/5uEKnxmKZGCSBny85jOj5wePKYNw7WcUlakGBmohfq6j0MS\n5j56zPdNgBu0DLMa1n3wS0+o4Sjs0qn7dDEnGsfejyVx0VcpbDGu+jTxCI7v\nYcUx4entyAoCxv4yrQL96hgC3KSB2f9xMz/nWyWXzN5E3TQ54XaGmIHmjmcm\nD9vdUehIPkJ+HwKWkzD5cpV/ZTzpE54P1q1Qxy0CBCZkp1Q/bEgR3a1fC3zg\ntARdH4GB7XuwOJ6aLkBjc+q+sOsO9q4dAo4GaEWzyRJt5S+r/5kvDPOcnrwZ\nw/SlIKwJ75pypW9yTCnvNmIz3hdh3B3x5kcb5UIf9TOjJinCPiTYSMnZu8n0\nmprldewTAzs7hvjgJtWsXuRhWmFe0gMmGxBuft1b08Tru9SmYQprClEEappd\nA0/T/7JsouzAKeZ5dIou05KIsE4daG4RZeAKmpZxmso4h17RrkvFID/Q7kDw\nxShK6AhIayG+w4H1w8mkqRlA8ZaDcogiIPu1uUEoWU9Fn5mjsrftECPX1Q+U\nOd/TKVrfkIQZlO9OcvpYh8hZrN5fTie11zjavXsFWNP1DTAtLipMb9KQP11A\nlfrV\r\n=Ks4+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHIIqtEhzKmW2V9SN/mSYG2PR4w/+pJmsV6TwfvzTjtgIgf9i1oVBaqEuGBy4WuhWg2Kc4ZlXKrfCIIVGUomF3NhQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.104debd5.0_1626735221410_0.6376237583219919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.4612705d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.4612705d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.38d1846cc.0","@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/fab":"=12.0.0-canary.38d1846cc.0","@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-icon":"0.23.0-canary.4612705d.0","@material/ripple":"=12.0.0-canary.38d1846cc.0","@material/rtl":"=12.0.0-canary.38d1846cc.0","@material/shape":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0","@material/tokens":"=12.0.0-canary.38d1846cc.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MPla+9UJ167CehvsEesbbS2bwIlznbCgz3AGeO/eMjCnDe4jtNxCJ4FJU/AIm/DjjPp4WSIjpWLipsd++Dswmg==","shasum":"3d02fee2ad6236b268a63ffd1e7317af2c591a6a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.4612705d.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQfCRA9TVsSAnZWagAAa8AP/2q+UIgMT/TO5m45V0pl\n1to0egWQKyynbJaKKo8vP54iTdvdftS+Ef7wrr27/JfC3zrXKyirzoLLxqKL\nwKabawfAsN7QZTdmtwqyOVss+/qhBFrRHnAsDkCBaPmdXG7XhTBF2Y8SsRvg\n5NhQzLuyzqVcc/gMY+1y6ll7oEGuHoGZSO4cwskuMYVeFRAcwPqMPRnhmxEZ\nJoc7u3Wx5VVifjASJDvyDBb0DCwWzYCuSHVBvcf5yushon80bqIGdmtAuMsW\n0tcDLlPpDFaNTYMBKX6aZ6a7YJtGy4zExi9AUf2VzFXoO5SYp4Oqd4kcuNFf\nStYCYtF5BWeRZou7kLNsFpOUq+ONiytv0/pvInkGZ/Z/zXdUmsr7htbc38+F\n5dRQfKvKHN609mKwMaelug6VBL9UjguSNYgUMpxh2+dgRUk0lm6jF3/X/zAG\nYYmH1w72rAm8i8+MF/1465HWOmJUlgOhaI8Wj4qsv8aeNLKD49UW41Z1Q1xg\nKQls2euCmXhsUFXYnOWnLH5JradP6TA3yuiO2Wvkr+BcsR+ugwXAbfXsM1fK\nqU6O+MQMJZJQXewfYBGi+Bcf6gdBbQZoQB8gzQqhWSZ3pPA5Me/H0DHYudnH\nXIiG+OlZaySHB2nBQHHS49C6REQej17/tCSDl+Cm9FlMWTAjpDgD2R7gYuxd\n6L4Q\r\n=tq8Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQTg6JJPOqyM952mO9zmUeDtDC2z/Mot0f88+30OvUnAiEA4GEBI6ZJJd8pAuH952JV4/UV5iUXL+ekGDe5hWnwcgg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.4612705d.0_1626797086865_0.5350990892114735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.b36502a2.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.b36502a2.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.6b0442278.0","@material/elevation":"=12.0.0-canary.6b0442278.0","@material/fab":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-icon":"0.23.0-canary.b36502a2.0","@material/ripple":"=12.0.0-canary.6b0442278.0","@material/rtl":"=12.0.0-canary.6b0442278.0","@material/shape":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0","@material/tokens":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-19PK6il9xn55x0Aec7hR/6ya98lkfthbw3VoxaLdbhxs5+yFpiBcbB71nTzpoRhsOfBczNDVv/6E+kaahLs50w==","shasum":"a262aff314ddd5bc0a7b41eb7226b6c7823b5f83","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.b36502a2.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEECRA9TVsSAnZWagAAbyQP/2ZSQtcDScYb5jy9K2Yy\nfVf9iWa1eOmv7wi8nL8390f02o7NL/WktGIX0px93yNmS/wcHxfRVw51ODGL\nE0Ck9M511wrdNj6AOj8rqg774CmU0LAravZ97O4Kh+A12ke1bRzA1DcN+Plw\nxS8mn9nRduZri3HjenjE5dvp/tUqnhjfBUidQgyPTGEKuR0oSYMWnsljh1Og\nlvA2vjrwmrD38VrotLTiW28zaP4xalsHKelvWFn86MYRyEaKHL1ln2rURTCc\nnxlKutaO358NEeCX9FTwbjn+7Y1vzPZADpZpMr/4GolLLldO3icA256dZ052\nOiYOAzeM6NqE424+vK+6T4AJthomI2+lTemAHwP8PmvoSZ90bExxLXBu1aVQ\nCkgOq3tcjuJwL6zGVXCOkaI6UbsGrggXySmdbUGRyu5cS0MuTbCsCYj840SZ\nprs1cZ4m3rEsWLcsNdcUT0c54NDSWQNIZ1ONLrsMShXoaFEB/lnSzzO91vdl\n2wIUP+6ez8z9571ddDAW06m7pKMr9zypTxRgJEn/JC5kHLJpXdMYIZ/9x2CA\nlQB+6laDMfjQf8YgbEiZ+xXM5F1pcIuTKHkT7egF3y2Cz3/nZxy6uc+J1jsN\naTNh1fG9424GgTkNvHg0Z4BYVlAGs3C62NXle/u1oEX7hnEXWyJYwF3Mjoyy\nL+/T\r\n=o6FC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICf9usKnpJlYGQXOs6csgve7DTKqS3Zupe2A97AIJogvAiEAmSxoUb4k1M17dbYZZctFYuCtYH/DrUZv186FIV3auGc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.b36502a2.0_1626906884329_0.7648128957240583"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.2c392ab3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.2c392ab3.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.6b0442278.0","@material/elevation":"=12.0.0-canary.6b0442278.0","@material/fab":"=12.0.0-canary.6b0442278.0","@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-icon":"0.23.0-canary.2c392ab3.0","@material/ripple":"=12.0.0-canary.6b0442278.0","@material/rtl":"=12.0.0-canary.6b0442278.0","@material/shape":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0","@material/tokens":"=12.0.0-canary.6b0442278.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ldpVTLyN3ryLuNs4Do0mhIbeN5BOgX7YtGOReR0UwO6Irr1pNhn3bk9ktMQ7Rv1YwV+LSzwO+PrE2+TG68vgPA==","shasum":"ea9751a5b1d2f88c017f5ff40cb9ae71a1728fa5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.2c392ab3.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZNCRA9TVsSAnZWagAAwY0QAJSvCp9I/oLPCyrOa0I0\n20qDZzd6wo1j8n8zF4wCDKlKcJGvljf82pjciW6uxqSNkCVdvz+3IhLBNXHy\ngYCAZFJ0NLRqV3RNeUQrezgYhvhVCvP/FDh9/O4YInZOdYAoIpVSZ3FSX23a\nXvoRiJlSn19nV64Jx+mEfGkvXApPTyVrQynodnFOpjY4r/UR20x6dgYVGysV\n75THWC1vs6eMFXRopkmQPJCuDUpmL5NR69ftI/pneUBgLYimhemOCtj4KLDs\n3zb/wk9OPRTcKEejozuYAb0Pll2IZHdAW70mqG7sijg3B3EXY3bInJHYpwok\nhFbYs/LNM+mm7haH4pk/JYm4gyiGxvBqhHNVd3mZJ24Lno6zNKPSHkZPI8yG\nBmuzZwPeXmVyBt6IIud43C+AmOmN7FH/fREjE3ZUsnlQ+e/7mD9ho0rdi1/Q\nvPQ8d0lcCc3/knplbLlmnzjva0JxzHdSwZdthkazrPMXwT1TTkxI9+3kkZJt\nAZ8hh2B+ZLxkGDSj/8wmWeHC+RwXpZFpj/8Py8ieM1pvEroJ2/sGQw7rjQr3\nETm6FSuBaqtDPwKC39tPtGHx2UYXLkJckTsMhb4toIPOZA5io0sns2ujXJHm\nbIu6BM3JX9q/m3UyilSA4hEF41FlQ3yQvLlcXjHZE++qE7eSZBSxm2xpVk2e\n3j2e\r\n=3Pc/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHmp+U5xrujdyjZnHxM0aDWv4d1+RJsdCZ0OcO2R3NfvAiEAy44vOUKSAq9+lm8iVpeC854cZ2PqZqUuLznMUbAjPzE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.2c392ab3.0_1626965581813_0.2610200504759512"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.e8bac95a.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.e8bac95a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.5f00e454a.0","@material/elevation":"=12.0.0-canary.5f00e454a.0","@material/fab":"=12.0.0-canary.5f00e454a.0","@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-icon":"0.23.0-canary.e8bac95a.0","@material/ripple":"=12.0.0-canary.5f00e454a.0","@material/rtl":"=12.0.0-canary.5f00e454a.0","@material/shape":"=12.0.0-canary.5f00e454a.0","@material/theme":"=12.0.0-canary.5f00e454a.0","@material/tokens":"=12.0.0-canary.5f00e454a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rHjre7ggKd6viHsmuWQuHWYTZNHNCCqyla43NrToIzl8AbfLQ3s5JwVtTPMQc5l6Bqy/9KjViq8RGX3Ye/04fw==","shasum":"fa2f36130e9c204359729f28ffda59af685f1f3c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.e8bac95a.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6NCRA9TVsSAnZWagAAn/AP/2v3Im1l8ruZ5A5XnRuL\ndAZw8dFCLZwTF+kg43ZenPi2kUGzVxoZdL4fKcNiDTxUeYdMWhRO7hGaLlKx\n/b/E9h0FaQjQRj4rkEWm0wzVZAqvN0RwnpWE74Dw5v8oC6FT9LfCjQ7rj4KY\nQA1Y7hlydqsacjldQv1rSlJyj/KXndoAUAyE8qP/u4bhA91F/P/3r/50zScc\nPtOjfegVoOzFVM/Gxdlnwc7eTlLMdHnQenn74wCjNBHoyEFwI1GHcAT3TxAp\na9bVf2XxOlK9jZobsC2TjHIiYX0dt+z08oMdVewGLREKyNwra9UIpN9wbMuN\nWTaHPhATEr8a8qZ3hx8lRcoFvcP8B918365DNAJ7uMxBVApkrb5mHNTdCz1c\naX1QlUHVT20luMjZ8vCMmbVgT5cID/aCDSrz5JTn2iGgmn77UgNOMzOcQi1a\nMq1S9adU4opyVt76KkhC7JWFVFihPuIwBrUF10wheyIRou5PNm8A5XTQrLFa\na9O6h5qwE//ud460pw5MHksIP95Fa6XFEibwaOHZfz3CCAoh0reSbM9W2bY+\nJRtvFeoikC6sWccC+s8ZvAQlCNyes8uxXphnBUj82r/SSBEk2yYHBIZ6Ytql\nCtGkMFAFcByxbGMXHnMgCBfsRYm0ZDU3HKomqrUS05XtG7j7IVL9wgfJMIuo\nC+yT\r\n=iRxu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqYl0bnaoqbfyDw7qn2oermAEim/yJF4YCXRkSFpWaJgIgcfR4bowK804Qrc5fFnPLEJHwFV5ghKxujgxLlHRlLqw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.e8bac95a.0_1626979981159_0.4059679487725394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.38f29f8f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.38f29f8f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/fab":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-icon":"0.23.0-canary.38f29f8f.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/tokens":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Qn+1Cs4QwcAIB3WT5J71TuF0z588gDLnwN+yjYGGwHdK+K+yPauRnaj+UVqoDeSAmb/Kl+gc7+CJsMMJy3FxtA==","shasum":"58ca00e83dbf180f2ce40021d77804f6f64ff4b2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.38f29f8f.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdpCRA9TVsSAnZWagAA5rcP/1GW9Jun0T9F9io/k7qe\nYmb5USC0Sqci0FdQBcdKnRqaDJCiJKKjIYo0mtdv6ymYruJTO8QfdUmUrqWI\n6pc2PUYy0IQ+B5hXadW8+34UmYt4eiXYGFRTxsl3L3PBcIHVFqhBWTf5WYcz\nn0WcDbv3nk7YcTp/Q28jmWMQFNE7cc06wuKldCMy8zVEu5F8Ccbsm+fzCaha\nGXpLu+b44/Ta8WhESCiYUjK2i1Be7+03WGG9GRxDALYPlhfIsosT3veE2mUt\niaCe99IDXqWHmDyqPaDe9QLz5oKiXJNe46l7Rm+qIXQFZ+Z4zy+K80QxuJu6\nu9gYLVMUkPzijupbUNvHwc/dIR0s2VIrABsJdunUibV/lMW3tfppVlQPqYdu\nOBjlu8mfGSskik6j6nTxxUQIS9/ChsFldM9HpiCr6K2SJXZ0XWiyq4nPxrQt\nLcQ8xnXqMRuIb+ITZLrjodZURH5+sYQFJ3zA2hVjzQO5i/mNCoPexDilLN1W\nFQjg/yJqqMgPtp7V15bSUEohpGOqzr3k565M9kIN/kAknGSnv+UpW0uSnjjI\nCPL3+CPJAx6KphVCZObd/4q8XHGOgogA4CKlYfaGDmUT7RMLLBHB4+xI8kqC\nAk15Elhz0RbMZ2ZBrfslmMqB+VBLN3fIS2UnJXHxHwEfzKaiaSGkRWiTzHQc\nbxjc\r\n=2qW2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrEKWcoLihlP0Sup6t9iBN7HT5a8j+5oDQT5da6lBu+wIgbiScUZZ4TsK7Qe/kjwjg77GH6BPIUUry3Xdu99BgEsw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.38f29f8f.0_1627064169356_0.3517535572270363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.e0693475.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.e0693475.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/fab":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-icon":"0.23.0-canary.e0693475.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/tokens":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jXHgqog9V1EJaLAITABxK/+DeNx/AULazblhhvIKoI9QEFnstTs6lnJG/yoA3GqSJKKdZMnJy8p1ucgYmDRz6Q==","shasum":"001c8d4c9cdd676dee3dce7627833cf85ce72723","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.e0693475.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDSCRA9TVsSAnZWagAA5w0P/1I6niGaFEru/YKXy7bU\nFRJqc8/vmcInH2KZ/XmmBKbse74g1RdVXo4pebhG65QxfcBaYixVQzskdnZX\nyx+PpPQmGhQzOQwPrOvapy/9OXAfVKAJGil+mtvpxsE4co+EZAWmpWUJkvCa\nm2Sl3UWdoEvQuhbOeJ22W2EBZfbL/q1VbcEr/yYYX3e7GoUQ1FLLe1JfLjTK\n5N4uMIZiXCF7Lm8b2Q3/AVdCHWTR5mzQ6CLv8R8uNH9Aek25fB8uXlhXdxd5\noqTv8MSYIuo22Z3TSy7ycotnLsJzOc6tpKlofVTzAisuBcCsHYNprrGgMY/4\nhLkZHvamJ2s0MmyaWg4kEVU1cgveeCmGDdMFFA1Hg6LW0V8I4/U8pTqxs2ZL\n1ENwqWlhkwQtjhlgYf/aLifHZdDdAqqUDLIQ0Hpn7Z5tK6cm1AhXSzP9fusu\nPbZ/1PLL4bXbFDcP0TXKIe7EHhgiST8n2j//EOT+8JZBB2gwhwp9AEUoSrT8\n5/NSeQLYqmFvl+69Vc8SL4gxrgjiGVVfAWj+fFqJ3yZwlSPugp0KEUWDWeTg\nHcRJ5Rw8nVlj3gH48346uPbWj5zEDXM6WkAp9PCvtzWNTfnQM8uTytO5JDHb\noBP5DEJtf5W84J9+d9SVn2extpRyY1PM/rUamWaWYjarfwYi1eUvV01KL5eQ\nPd/H\r\n=4ey/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnWJ2qMuBiZHk0alLHLCc/frrYmEInf1VnafS/sMDYPgIgK+TJI07qg448PcLcop3VburKhJX/2uOSkFNcRQ6WgMo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.e0693475.0_1627066577948_0.14126382641063273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.d595e030.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.d595e030.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/fab":"=12.0.0-canary.90e08fc6b.0","@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-icon":"0.23.0-canary.d595e030.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/rtl":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0","@material/tokens":"=12.0.0-canary.90e08fc6b.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Mu3BZ1yFGS9G9tO4w38LijQVmzuzwoIO14xmISahKeeEJHAxyVC38kuHT69dmSLNioHqYzXBZKYKYbZ/Jod7iw==","shasum":"5b435094062ead81c804503c7041ee40716b7cf9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.d595e030.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxBCRA9TVsSAnZWagAAUaEP/2A5E46okvr+GyJhLf0H\n2v+9zGzl/TXXYIOguCrKlNKLr3AOoIten/uEH1GRom9BtAd/7jN7rkqbyzJy\naIghXGxdI67NnDEeNp9XmKtpWDnMP09b19TFGjrdWsb/A1KEwugrxjDx0GLc\nH8F+LvXFZCfj2XAIDFz2p/3xZsmH8QjfKzkonxgf2uDg63PMj5RCWRaZPjdC\nQLxy3YOByfrM0Tg3mUjlwz+hOY4zaekBono0WFXf8i+Fk2nVnWOIAkcqC3el\npHx17cEj5fDOk4XWCQ6RPkk+2QDha1jSmWTjIYaqF8i4lspLJLOGI0Bpoy+V\nRX3T8lovrmgFAnpxWQlWTA1vHR8ECzSklKFJZ/0WQDjaKp6tZaB1Fh+VoSA7\nA0bhpx+io81Kw6dV9BkfZZe61TCPqOOMOckREPgcBjcDR6bhQuow7ktPDe4Y\n2SaBEZm6xt//UKV5PGY6vXMoct7pT5eu2YaqbotLXMhN1xLoKtKWOWAeLg2a\n6HsUEQhNi4hzJDLeI3WDXmQjH6x5+JYC50zcJenPOTh5Whtlw+4Hn6yJbF+I\n+rNQf2axlDICoN/QVwZvAD98jUNCmZhXqV92+nLLrcJf+04qcPxloQGVU1ve\ndaxAtXzYJkyJrlV0skMwRyMtrR09+w3kofr81k7Si6PpKR+D2SSfWGtszGKr\nbwuj\r\n=R5TM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKZWAcOi9VtPZMPYYkJo0QWlccQmxR8UXWaYQ9uqVpnAiEAxYPDKm4ntepY3gr3dsvHpxdD2KW1l3VillTP/PVWmsY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.d595e030.0_1627073601555_0.8677030360303954"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.fe7cca31.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.fe7cca31.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/fab":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-icon":"0.23.0-canary.fe7cca31.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/tokens":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NJMliAseEq66In5/G8i019R9/thXl+E/jFeJtAtZtAdU31RBMzJGxIEt2rQfOibAjD+Ap0Iukc0cAZBXkUuvIA==","shasum":"910180e530ed537722b88816170632d4a5dd580d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.fe7cca31.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zsmCRA9TVsSAnZWagAA+dMP/1KoNqdfmh+OZk1kajoS\nWEfQ2JCxly26jf4jvaHkqip+efeIEzGYgf38tHYitmWNJ6loIKkIqA0e48y7\n2Kzw/ElBDrInearqF8stXSC8V8OXJ0HNQ+9skI/CkKWoBJaeytA/rGoLWAhw\nEtDSP8CKAAREy1Imhzom7eUpPvqBYWIV8mSDWZa//Ef5QSTaragGNA9mpQTl\nSu04P21t7u0Zer+iu0TAfkeadF4nDY+flcbeS+8S0W1DqJ8nR8yrLZmLyU0b\n8wXFvezE2N+2dZLFI1HGubtDeuUtfUN8ZjeLckFfU3+tHpa21NPtXw8nEvIV\nROz3yMumoPj0HzzJ++jZBqrToXsOP059a0uc/yWh//fZ5sw2UzUHwP63yq4C\nRevoIcyletDK9oy4wpoDvc3naP7t4U3i25or3SWJbnVoQUALlCIpJtiB58ZR\nQxw/YQ1ycnCqTGZxSPJ0OvA0/5stYqmhb7sTYnVTvEo0kMETBBWtl8TRuyqH\nU2pLVPk+r/CRHAgRNT742eb4ogkuRqSdcQqFMSG2lDUp946sLIBsgu7Lxk54\nbQexG2mwEnQ+7sgsm21O8W9V2Da0GIEfojDjYqPlCbXlAZgQageom0lXnT3e\n9/3Bzl1lg9r5pgWGGiTdZzBAC4w3tZaCQ3Gm0rlGb1wlWRuwW+HUYZbJCQwH\nNg3Y\r\n=DLYf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlxZVwKXSrCcYX2hO+ayA5nYnA2XjaGI/4hf7rQSC3kAiAUOR2w5w26HnJCnPTxaPc5hO3z8T8DkZxf8bzUNCKkrg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.fe7cca31.0_1627077414768_0.30981321937281225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.fd9da483.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.fd9da483.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/fab":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-icon":"0.23.0-canary.fd9da483.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/tokens":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Yz6OtduPysV1BXvrIGSGMaKh6KE2CNzbmCLP3HX9rNxrUdaJS73oIANR+f/VWM0n0phOmDp+DspgpDBB5mmCQw==","shasum":"bfe7b1bebda2328a90674fe8628972dfaae5b185","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.fd9da483.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygrCRA9TVsSAnZWagAAxaUP/3djekElNWwA/geogMCa\n2Kbv28/TVCW2oV9lkIC9GkAwRyr8NZNPUch5TEMutYN71IyP6FMrY7zbmUdy\nIF5t5Ga35tOEVhFQe63oZzmlmFJoGJBi26QlmcIPMd4eUfXo+ogwoomGOzvT\nvKQharmVsgPXMJ/FxnqlnF/MQ50JfPfZBdG6EQb5igec2As3afAlCpALFfFk\ng08t0E6a+DUv/OImf2dSNoGBlNWO4w6hDl24WSKgXpteDlifibQWbU+jKmyU\n+UkfjcTGs3RVsqk+OEEqkQ0W/VbrM/+mkoyPH15V9QutsgeoUO637WoYu2ei\nLm2lUF4+yoOFz7H0omyBNAgHwbQaQL64qluo9tNQ2ZJsPHMW2INQ47aO2I59\ntN1LcvykVeZO6Fgcz8OIqnrRMeNBuHmTLnrrfumrIJOggeqp34+27+fzysMa\nRy++hLaAJrfsmC/8vul57RO3FTvHHOfkZaGgIcWx9IBu8DwNg2bFX/Z+WO0h\nsBJJ01397vYZHYjv/6PNHb2YU6TgNEKN01tkrQarv/34hKBGtk23Cm4uuuww\nJknDAKVECCLEcMu0dLgOA+NpIjELCyXqnJz0I5nvlaS5REX9lBwwAwGo8aYc\nviqhYNbb37V496htjSorF1TUzI/48i6NlniI78FT0qX1pM8ep9+bhtD0uEkY\nAwyG\r\n=2/JC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgtlON7tXQY2QEZeDvcdaBdozU/ksXJdZE4IbgZoxoUAiBjgsNIGy3w+TtiDvDnHtITzzOU6ZGcOMKEsUMwlKBUWA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.fd9da483.0_1627334699071_0.22286225510630442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.8a4c7e06.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.8a4c7e06.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/fab":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-icon":"0.23.0-canary.8a4c7e06.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/tokens":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Bm4Uk6qsol3wNNGMC+l1nyZ5yI995QeJEr9QMEXujIdjlGO+AbuCDOduH0pSCTnR19hxbZ8hlCncBIyLALIfNQ==","shasum":"291434c5063254349e8d847f570cf9fb603573e9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.8a4c7e06.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zq8CRA9TVsSAnZWagAAgPUQAJzQaf3EBHyLHn5EzMMc\nk/FnHi5qXzFIn1p3U3fxZ60LjOrzWlgaoQuxY0/GGsL6TPU78bu4wzRi7a2L\nrWUWON0sgAu9+2hEXq4uw3p8788iQBF+ALtVOP8lAUcgM0s9ZbHC0/A1Y//F\nMANINZdwr+fMEKs7rkG9p3DlFodpWyaSc7Oqocx13RMQ3D3UQQEGa3yFnvBL\nLere5D1uyeqCTxfwzozQdCTm5v/Gq6xKqbttzS9ODhDXTDUyoBf5SUsiU2Tv\nA40u1felYOIjf5oemmE+yy7+KTx2uhlzhdirHztwLFXNiQMzR1qlJZONvw3s\nDS1aLMc1qavRNCjIg4XwrYBrJLJQ/WIgogSqZ2DuBWqQr3DruVmHnal0aRkW\nTL5I8+Nl01KyAm7t7b9lPCzV9nwW855gs5rZGEX2An5GAbeJ03b6qBY9T2TK\nXMLXmv5Or8LXvGF36l6cfZdAOdXs58zIfNnXkCcu5V65OhoO0INym3LhF60S\nIWr1paiyr7SJvn2AzTumqZWxNuQ6YNDNTHmNn+Kuz+l94KfL9lqIV3oK+U7m\n5UN25AbOxjUztrqBQnu+KaKNR0FdD/0T28pcXTrlsjFVq1yX6618rkGd60IA\nO4WVnfeBlHp2Ao/V7rR2GNY8BO0Uam8KN/9cxYYFl7ttziaEZFJEpLjAC/el\n1X0l\r\n=1HQn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHExIHzrwTXWKB+HyUs8JdcKCT+yCu1F/lHCQgc2ZrOyAiEA0CWkgRVd/fMGDKBV4z53FEAUziUlFgYEEWimCfZTcFI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.8a4c7e06.0_1627339452058_0.7533573641697093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.5b395fd1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.5b395fd1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/fab":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-icon":"0.23.0-canary.5b395fd1.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/tokens":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-reM8f/is/u4Mv6yy8NcR4I2TMJsNHLtjbTs/bd7s3fhyqe+5TlCr0ABy1q5nSLkMEIeTa4LAZrLuk23lX3K6pg==","shasum":"f291803635cc73d43d3ec3f46298d25d1fd7ff96","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.5b395fd1.0.tgz","fileCount":16,"unpackedSize":77030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5ZCRA9TVsSAnZWagAAHM4P/040rpiS6a8M65PAuKC+\n2bwvcrklBvB0kztGXXnoQPk1lxHPb+3LZVgc/Vcx5SViRpTXNTmjNCG7p6bG\nKD9WsbGsncl57lfmh7Hsjbhi9PkQ4zaJWyeHfevI5AaHuBv4fgjAb75o4Bdo\n+0Xy7j3mmA3pWDyA9Hw0IfNrQ2PeFDIyWQuGCl10XOaiAKWIEJja6XNbuNwg\nHzcIOGmQFjzVHdQya36TMVqodtAllEsqFe4osc1BZ3gDI3DVbI6BOd9/2SIM\nDJznJrc2rBiSk1WyhhD5r1vK0POuft0cVMrdtfZKP2czB7IWCmnnhJKB8FvP\nxJUc+ILWoLMxwf+d+Z6GQR6fO2eMJbhaQpA0OIhonmODieJ3iUM1JHOXWdQL\nza1QPje/Sq9EIqz7h/A91wAbb5f3HhpiLo5R/1h1V6nfd1Nsk4XlAr8lUSX0\nGnpha3EmlALDPOY6PF7abVWUtB5ZJnKk1KBDp9euuscc5AG6WLs+dV1hYszA\nPRiZ+9QAr/XUOGspYWxjsfvRyXpfMa09IKeUO9Z4IVB++WwQTNoQ5s0bEFP2\nGC6384E43MwJtZKFA9dvrf9y/xDguI2oo7RcPkTMr3asnn1vMgYjeie3RPEW\n6i08bLzLyhKfBmQFe7gq/v7bLUOB7Gc6rxHeW/hJEaUawEAZDGBH06fvCOal\nR723\r\n=U34j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyCjTEDjnYCrN9Qfrms+QYjXYu5xh8jjrjsOriic2Z2AiAZLxeiNl01upvOwxslVDx9hTQIfb+wD0ZH71NNGny3Kw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.5b395fd1.0_1627426392842_0.4045919580578796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.e5efdcc0.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.e5efdcc0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/fab":"=12.0.0-canary.3f36ac75c.0","@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-icon":"0.23.0-canary.e5efdcc0.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/rtl":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0","@material/tokens":"=12.0.0-canary.3f36ac75c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N4sVmlIN6yucBUvoBE53WzpEq+yHHAdBnxHEOHkuwgd1fJviE89JdFrZ5BmuBBEI9MtHtr+1tf/nScuM3I2LDw==","shasum":"f6ea964ec9613b0a246101636b349fa14a9f1dbc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.e5efdcc0.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJYCRA9TVsSAnZWagAAd28P/jea0EraoYcbESQGUFOD\nacQveufHKOfJye0DwuJ5cdhl+eK1ym/5Tqj7rsaHQ2cD1PJ6YyvUY4Vc8DsX\nc2yj4rAAkfoUsSTOysI7gd2nP3Bg68FwTwzVPWzXH52MxeiI6M1tdNB2AOv2\nEXoa3CO4k/SBpz7P2mHadxZ512QT/ZdBBonfBynDpQYk1PPn2Px+MGiEFCo0\ncQHsfl9eem9Aj1NNbB6gBPmTLZXSdLSufDrBDieb4JPEgHd9pMU/agM8CS9V\n1r7KDaUn99NS3lQNrHoY4H86QxKHqSYd5d+TZQpR7KJgfykM7MQWtotl/4+0\niEEcuYjL9D3EH5pt1OyASIfNxmcPeaG/jZf3z88nuS4ziQYdJVYl8IJ7KAMs\nBXenCah8O6UJPkNXZG5N3D9NF7bB7pV0B6NVMLtxJpSqm/ttmoGRiwLaH+Tv\nvSDAQcrLprsEPEoEn6Zeiy/KBoS89YRoegGJrzktYl/zzDxRcHP+Kf8/9LQh\nw5YQZEkHFhcnh9zhggUkygK8yGxsFRXVA9f62tbCpECKSzcPv1Acq/VF7W8Z\notzUbFC32KW8vQdE20gYvDEuZFKOmS8UZTKRo4dsmNq8eMpIIITg+uvSxyL/\nNR83SyK140I0Ch+h0qzHs2wG1eTjjoxzHyn8H9oLHwRR3KiM/s5FFzc+BJvU\nXWYi\r\n=EA7v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq49yKQXnhm6p5jHopTz9JsqNynhWgyUTSd4WOsfHf9wIgFcHOapdMgzD5lAJBzBxf9QrDg/HgO7aX7Y1PIMkYzd4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.e5efdcc0.0_1627492952177_0.8538582766382203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.ab310900.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.ab310900.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/fab":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-icon":"0.23.0-canary.ab310900.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/tokens":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LVZHvaN242fJewdQonCyNU2NPaByjDqphCcDtSctqRjcKFLMeXLlp7dPNvLML3RJrrgPsGOLiVtS1R1jgdrSKg==","shasum":"7db0db7aada6402573185f0b17e5e39dd863fd7e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.ab310900.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxJCRA9TVsSAnZWagAAp80P/1K2cDZu8UtVzTmoz+S7\nWcJp4n8N1lIivBcxeCx+mCUEkRAt/iX+gyOzmUreUW+qvfQLlO/0U8ot4Asb\nd/G8sHyxgn1JCdq4P/g2xFCQ6ufi/vNQW83i1e6e3PCbtNll/bIni0VW1NKP\nst0AgUaxhnygRJ+jXZtY7PNIN1WhUIwQvtZMAVIBd7KnYwmdwOPkOHQJfhMe\nND1l6ds9LQIBW33bhjljIL2bPGZRMCRt1S4/4a9hPbBAx8UP+3uDi3KwsLBC\n7My/Yzo2npFawYejA96cwvj77xoCaVOpxHu3hb05cUNTGX5RXwdlvApuZIPq\nJ6ty+ouhlw2eYoPOEePSekGBrTH1mHBLH0I14le2FVuSFJIiGihSXQIhb3z8\nF6++w6sNrk2wsogLNQrSJI5RxCv0llxWKw6DCVVxnkMYTkUshuH1fHXNl5Qb\nGh+Q8QuSyNrfI1r2Rj7k9Wcx18NTNKn5NW2KtLeqawny5T4kdV45zKrdtqV1\nK7LL/SYZNttursVi1h3OotgIV7Ueu+yz7oq/2ALCzwwCAeUGK7sRu93AFnPX\nRP3TbKXX0HT31YkG9ol1+XpGfZXhGP6UmE1ryzBcEJ7VdHXTftCEd5uWRRb6\nkdjLgFPRtS4Yigm2Re36wCUOVmUKNUgWfANuvmJCWLukuL3O9H0IlBYVPxEI\nByLs\r\n=gps4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAN/aC6FLrh3wIBMuH19EayMWDKvcGuvr/q9BN+JfKT5AiBrYEyUXnO0dK+S47wMM7G4VW3ctK1iw0VEfbMpRFlCQg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.ab310900.0_1627503688941_0.8748559017785933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.21dc9bc5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.21dc9bc5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/fab":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-icon":"0.23.0-canary.21dc9bc5.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/tokens":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8n41WLg0JdatF1Aa59E6sGzcXOonUTgAtHKqo/EIk3hmxZdpsr9sH03q/qWRxdTZjsHQRS3s55seyoCR4aOl8A==","shasum":"33dbbe99238289cc8e4395e6b29d252ad1828ea5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.21dc9bc5.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1mCRA9TVsSAnZWagAA//sQAI/XO3A3A5E7SPg3xK9V\njzfOtnqfc6DE3eC1f7kroaG0FHwHpM1+eC47mRX+0dIKVmeHlxXPHRLFTR8J\nCqbxa33SfnXh9VM59KzxaWnpgGpooltcWkhLRRWdfKvbFDPU7dZk5JUKdYBF\nDh18ZqW8LkJ2QMWlgFyrUQcO7rpNUAVPBbzpnBs5ja4PaHpmfj+XLbQB0RFL\nAduPH+ceY/tmc0rE8Z7H1NxDieqOmz7izy/oZmZg3gjGP9JmGFXPoFYuQChY\nXTRcaZ/LIjooerluZaqPBuyH1RJC0ibeLGrlkdsfa9wx9YIvTAsG1FWXDBDI\nheh/HJQeSiQdtMeew94Bkxkm9nlziH7gA2aBk6LJe9pkpfjlQgqmVJI+Wt5K\nubnXiBZj4l7VpPT6NgDUhhrOQC8k6A0mnDIuubGKms+p3ze1X90tOl7dXhZt\nkH7D5Jn+XfiPFoOEv0ZGg6ZZnQEn2lZLOru34qiv+FL/qTJ0FLeIj7b5UOCX\nJcdMyflqgeemQwNRR+H0sk3KoHu6GkV6bro8Mq002kGOu2dZr7SGjw3Q1U/n\nGOoDG0V/RL/zxSh+BdFTi05yYo1Dnyxgb40v1EffLIPcD/7gQdNcJmixOHZb\n6Vn3BwdGnMo78xb3/Xx+MYNH9IxUM/Vh60nQD8fqnKfya9/q2rtqbsPCGYIu\n2pBW\r\n=3gnF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQdNtIGy021YpwmMGpK2tBPDuzb/bBnKfECp9OlMlyoQIhAOd55kg9viae8c+tgH4i+BcClTJLlzH9Rn9poERHWAsr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.21dc9bc5.0_1627503973872_0.7194951812362731"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.68c7fe5c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.68c7fe5c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/fab":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-icon":"0.23.0-canary.68c7fe5c.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/tokens":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RAS/wmdZS555R7yO8nhhpHE+wifZhD4lm/n0UfsjGBSmzXUujjoMWUrtOrgstAStljiPn3k3PyByEzu6W1atsA==","shasum":"065afd1c09445b6fdef31124913f3dd1a7dc078e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.68c7fe5c.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQfCRA9TVsSAnZWagAALq0P/1r5y8TS+by8bjCYihbc\nVAGZ5TkH/mEoYRG2BQtuq0qDfwJrsbkFNajSWLt28xvc15QQ7zIRCnEtizq6\npjFxalHAKL0+U+pVsHntkmSuXYoPSWxgLBJbIGMOHsLL1Oo27NAxhvz+7yHS\ndNjft63yECDMZU6WuQmbVSonUHHuai5ENZgvFWQzoyiYHTFzusRXIlFnVn2u\n030w85gpJ+AhTqrV0CVbgGH43vVAh3/6DJK/jU6jaZO8tY9nojKhKjrMr2zl\nr7nVxcbnfGVqD5zmCypmgj4j9Zu+tN+mp+TYD0hsR5FXE21nh2eR8xTQroNa\nlDBSV3ExDatGTShOwnjKzTsvu7JXcHsRpExjmS0YXgNw2wymmv4L/nyemX0r\nX4UrT7eKauRAxDIspNYypEvrhU0z2VRLMlNeHNwvWET4o4Pb7KM97kGEKgyE\nuyYgXqoqx38D+ncCYAgRVZ5hA6cCOzywxb3YFY5kxtObgVM5IklYf9EYSagr\ntFi8c3UxGK5GylQIUzJwgEqoE//TbInfj/pSbCplZQJI4dVHFnisSjf0fEWD\niQyFBvaoVULUdjQIu0u64jAKjqDRLwsXdeQ7gLfsWgvQD218XV2orMq+VVbe\nENYLW44eBMRjUn6ee48e2Nwo+x+ubKS1z0WGk09ZXvnS1TtGDe8rTscX5aHS\nyqzS\r\n=TuL3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCe5Cz0dsnKtITsUyt+2SZgTPUT9XYxH8m4WqRjbcN1hgIgUCEaE2xSSD4JVZEmeouj1ROP6NvbDilu6u57aUK1rnM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.68c7fe5c.0_1627583519447_0.6165183906437046"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.aebe39e8.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.aebe39e8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/fab":"=13.0.0-canary.ae85f7eba.0","@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-icon":"0.23.0-canary.aebe39e8.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/rtl":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0","@material/tokens":"=13.0.0-canary.ae85f7eba.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Za7CCmDdGegGFIIMlXrN0EH3eHOsJJwMQZqgOYiAzBHXzzu+4JMG/EyuXkCCwqZ8j7/c0javQXeCLCwtdJ8kLg==","shasum":"d54a48c81eaf5ce659870adfaca2781140873b16","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.aebe39e8.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9wCRA9TVsSAnZWagAABEIP/i9Ix0TitIpj/brtRqkB\nSETwswdywvDRXUayFt3tu+lkaixoGRnV8KJWE+4cjdl0wdLGaX8q6jT02Cvu\nwoekR9/hRE5htJfshHLjis5jme4B4C5+rihPMDHWe35kHhMkbINamsly1XvI\n3CpaFXLdZ9LiYakvUc9AEa6GF8juQF4ICtT5HGCu6zxHCoR2ABAiKSqH1xPY\nBWdZHzLDR/1oc4CbMGmqhaB8XuspmSI0nXGrSOjaq2HlIWCefR5/6gL/xY9c\nus9AGmt8EcySZ8dxFHzeydmadBi3eXCZfPBEFQNr+na8/wAc1zUsU+DJn3m1\n1mXllomDJA291vzC2PMffjEJ6yK4GNtFFlGnUCgBiUF6rgeOge5fI7hrjKDM\nQ40vHriJEDJVACp7LG03177Os+K2XFBvw17JuCJOvxUmbT3As13sL81noY8L\n39HlPUnLSbcq9f3jkUfgIrsILWzvZ3C34i+skhOuL1S0cC9ccTg2GfDMGogq\nV/nBYJYSlpHWTAEnf8b0drrYq2JsUSvcuPt759LsocmBRqCvfgalKTbF8aSu\nvLTJ6Rq2+MQoVfaHqT5KhI8Lzg+5HA0yKn92xZ7u9pK80PixFzihxbJm95vA\nPrAQzQrEXRR5AmVZ8D7PM+nkEw/uZ8sHldTXFabyb7msnmein4TSZVzewhAt\nkLnd\r\n=NAuF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1qKPQ/13YoHBvXfbL4ApdU27G1Upr98bZjYlXFZjSDQIganhvY23kINB9A1DLkbPuWChi1qZuKffjSy0ojpmB9Vo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.aebe39e8.0_1627672432396_0.608838446762771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.ea889c69.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.ea889c69.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.cc5377458.0","@material/elevation":"=13.0.0-canary.cc5377458.0","@material/fab":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-icon":"0.23.0-canary.ea889c69.0","@material/ripple":"=13.0.0-canary.cc5377458.0","@material/rtl":"=13.0.0-canary.cc5377458.0","@material/shape":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0","@material/tokens":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xkTvACgkgfFOBYlG0xiOeuuf3sFIQ39D2UNSA5CUO1zl3IXF9jmcWW0/fJNlbWvCiSowGtX/S/VrUxbDkfT1Rg==","shasum":"e914d8f4c43d558b892c9d755b4d883223911ad1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.ea889c69.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9YCRA9TVsSAnZWagAAYCUP/ig78WO3B/72zJZjaLrm\n5D5EZmCiJaO1Zk1spQh/t5DxyePfLGdDo6da+JiC1GMP4RYaEZKi4w60nx+Y\nZxa+SR00PZ4aci9cV54thy10JSwtOyzNwnhHcr8BCoGlQtA6lRwsSks74JW6\nLkjlOhjC2bV8N5wwe9BT/WB/ZWpymnVWmQlqOyb/GZhlYahyAj34HjNfoy70\nnw9bDK0S7gUFqA58qIpodc1bR24rPmgtXGiEZUDlQAgisQcNr1+UbdjS00l+\ndA6VFrnZvxqqU2jYELJZmB9mSikmKLgTD46LT684KSui6iY9GBO2brMq/BQE\nv53kLA/x8+85Mi+MEh6sHJZAXa/R//tCF5W62tMm5IHijirNaSmRn1t8zDvz\nN/m+iwHofLYcrPpwKs0HiRjHmhVHhSbqFsymwtwEN9y9qbu3ysC47ouZV0YJ\nP43p+xLNpz8hqIMQJhmUTndqBKXFBqMHOnOcnepPcLKthtbGqVqdQVV6M9O7\nrri3LNxrcpSxA3FBjcDDKpnGoWzIF6Q5NxKMQMnMsrwCCpXHWg22I5iBZy5M\nP0vpR8t56v2mT+8djjAmYftX1sVe4s82j1gyzC3NmOp3hEHRO7VEn4XHZc/d\noHTV/xG6dMAOEZne3IrOLP+ZGGzjgZm2XcKCRANG+NWKitip2kwWEzGEFBik\nDNfs\r\n=ILZu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBtr/xmeCf7e4kj/vG08CsgExXXYxws3DVnVOQzFWV3fAiAL9w+/3goD8F7XSaf3zCGF4Td4QjyhwMOKuHN3CjJkOQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.ea889c69.0_1628016472010_0.6672198472769812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.21918905.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.21918905.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.cc5377458.0","@material/elevation":"=13.0.0-canary.cc5377458.0","@material/fab":"=13.0.0-canary.cc5377458.0","@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-icon":"0.23.0-canary.21918905.0","@material/ripple":"=13.0.0-canary.cc5377458.0","@material/rtl":"=13.0.0-canary.cc5377458.0","@material/shape":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0","@material/tokens":"=13.0.0-canary.cc5377458.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fFCt1W2SlUsOpX9PVb8LEoVrkkke/rK10WPuI1PzK6md8HmZ3d3mdLreeYPQ0YtbEMI0Unxbd4WceIc6q/CDqA==","shasum":"2d4b1c27682fb4989ae733039fb0fdf506f5cc26","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.21918905.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbG6CRA9TVsSAnZWagAA/dUQAIxH1DKq7LgFwKoQwSUL\nRQ2Hppnq8HjIvslAhQzuyMk+9zj95EG2sg3/MDrscx85+L7H8I5fy988DFSD\nIdZx6lJ8/IpB6T+bhPQEd7Tb6pdlcGOH4xNxzYRVq9InSKrUoafb9Jzly+PM\ng/90xDQmcVNIV6K5IMwBbxOSjkoYlhX3b9XiSGsVCCons+gEjK4m6+CWyBj0\n0SeLaSlPLujqid6FlTl6k/JQ5aJEI05SU8OvMvhHvA6r2GCXGzB6cQT4G5Sm\nrURd0gx3az8OcR7fqklDRYRs9P7d1VnzRmzuQRikeyRndUZdI/7Pm3KypmnI\nPiB5nDg2FKt2+RffvB2dIXodEGSNWxcWIhcCgutljqsT2ct5Q6QHXHRsvwRp\n1iegcXODPjx5MpvAyx2BJTN3Om1qloqEX6XDHGw+5fS6m5uLk7ExNgZFPXb8\n2C2wpWHq4XT0kqNcf3SrxUxm6BSrgDDFsKDoXrmosqAZJeNHcIhPK2Jt2h+w\nEWysbO+zLkkZ2Zj98qPaGzYMaB2Nk5yYs/DRVGWx2J3DNkDSMh8VY5BHdEXp\nGs8Lg274dBIgSIC1zUfPgF3ooelUegXiaA9zFvwKX3wFistQkUuA6ppQ212l\n4XByVPHGZl2+b9JZQi2h9C5ee3aWnmGzMte0L5jOLp2pCJSXZ4mz2kXrHsRa\nyNVC\r\n=vWgw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh0ZSPTvGQvUGjhTJpFSDJ15/d/b9GZEQMnM998aO12wIhAMOJ7eMOwyzl69Mwd7DuTuUHznoAX5pX2erYlmlAP+lU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.21918905.0_1628025274481_0.06664470990622084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.193c87be.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.193c87be.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7c96e6b98.0","@material/elevation":"=13.0.0-canary.7c96e6b98.0","@material/fab":"=13.0.0-canary.7c96e6b98.0","@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-icon":"0.23.0-canary.193c87be.0","@material/ripple":"=13.0.0-canary.7c96e6b98.0","@material/rtl":"=13.0.0-canary.7c96e6b98.0","@material/shape":"=13.0.0-canary.7c96e6b98.0","@material/theme":"=13.0.0-canary.7c96e6b98.0","@material/tokens":"=13.0.0-canary.7c96e6b98.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UKXpZpVu5ddmvjceUghPdXZU1qLmiiRju4KRr1dPXCs/rsphw0VC2HzPwVWiWRWVE4DcTHlOGp7no1pKtBQdvg==","shasum":"0cc9fd32ef9db3e763e5484917d4644cc95217bd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.193c87be.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdzCRA9TVsSAnZWagAA1ZsP/iTah9QefUDqdm0VM/o/\n5gRWmydnDz6Hm/wbMCZXIZD7kE04XeLmGF8JmyIxQ6db9zCL9niZIPFTseYM\nBPr5qma2Nd1NM+yk5Hlw0A5LkpPh5rjyxD39CfRl5mag2j7bVihpH0RoyyyH\nQ1X0U1KyojVr3Vs8VhZp2Hljop9lVg8ql/wK7iRib0HaAKfhb02kO8ZUwOwN\njS9moZEnlxC3mLYlIu0c6/tmHtBXayp5BubBXZTYLetQJ9rGSi+WyaHaF5Kg\nN2VNs8nvxWg0UtmUS5c3ia8NnIhiZJts8OMTYUvPmy8FiVv/TFunz9uaITmw\n0e6912pWQfOOvvuwo6lz5yDMEVmDW+xkuvgPv0GJg3h57OGok0czm3XNz5cI\nlcLBcXmBQlmhKaHqlT/LffBJbOKDr/16I0isXweKRK+O5PZ3nSHq8MXX0H7w\nhOJAaykb2Z12wChZ4U+YKxJlGrmr93kmjALGWC4aYBDS9ku6BOa5GcL8MGwo\n1+JneI2lYpIsbC4IauT7npZAUw0C58peIkGhNMcclt66MPzkOY3Qg44KTcRp\nkLpgwJwykWg96zCP0pCLnBejvqFb1KH9IGyplst+CMLwIb4LJMVWa5J0/ka0\niwnOj6Qto21b0Aqm+hUnz4JAxii2DNTtfx69yRopw/POUqEcktCPrC3S1gAe\nYHIS\r\n=WSBQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG1FQjPT1lqCTTkNm7KPNgVcO8j0OEX06pdMujRbNg/LAiBCOJrlFybwlDnOwz1RCkBCwR7hfnhJbWQHG/Gw3aQiaw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.193c87be.0_1628100467228_0.7699427594567392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.6fc52d8b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.6fc52d8b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.3dd611091.0","@material/elevation":"=13.0.0-canary.3dd611091.0","@material/fab":"=13.0.0-canary.3dd611091.0","@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-icon":"0.23.0-canary.6fc52d8b.0","@material/ripple":"=13.0.0-canary.3dd611091.0","@material/rtl":"=13.0.0-canary.3dd611091.0","@material/shape":"=13.0.0-canary.3dd611091.0","@material/theme":"=13.0.0-canary.3dd611091.0","@material/tokens":"=13.0.0-canary.3dd611091.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zOqcBMJ3F97LDWytDS+9VvWxxQZ++JL1rd8SKjLgG3EbfxIchm3G6HjGD1Sca71hTZHylgZUrHVuCgx/1mItVg==","shasum":"cce7127a1176e79f3ecb27e4ea576330a7ff59fe","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.6fc52d8b.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCm0CRA9TVsSAnZWagAAal8P/iZJijh1IDKPEbL6+hq0\nFfpfoU1AsoRNSIMVRANJsBi160lmOEmD5E48MxaBJRXEAM0/YnhbTCPBI4Js\nwSw8yZdOoefcRJc0G2j4TvyYgF9CCe8r6EJl+W+/Q9lpSyTwc3XVLU/wysvL\n5ekf3v6HShFyCLbdzrwP3DdYbTtSat7h1Sdia1g/H7zTP5LBXRgXWcBrchh8\nr2eLpwFhUjMAIKPZ4grkcTsW98+fC+rcTCN8hTIjVUCPHb/EQnyhMkb0BDUh\najaUUkJzJvO9YSFRaoM49ixO+mVz5XKuuAYHQFYYqN3X3g12EWotbuZpHW9W\nr1RMHcAe0NI3MccCLDLuRTDAzDSbFb/L9FR+WWI1nOJ3nOcCyt1VR2Rqot1Q\nIanL9kruXbfWRuZH+zUt91dCz1TmnBZtlnXHUJQ1stt6yBCq9zm3YBTf2/ZA\nuY1NeHaNR9RrqtB/VR3839VW9kebEl9lBtIdi0wEEq5c+qS2Ye8KsyVpE4Z+\nc9Kf6ogBkQ//K8DhlqVo69ly0FKxN7uWJi6UdkaabvJ/fzLSP9trhWW3ulKS\n8lwFm0TsSex7GyVWfy4INZ8MAKe51sH35NP3lkeRrPIRz6Vb7mjU/mnOZKYE\nV5VNIoTwxFWIp7jcVFH3Y9HhiTrP6nav+ZKTBf5LGN/cFW87Hm+p7MSgzdHD\nASbE\r\n=PnDP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4hYjlFXOL8aifZjRIJCOreuazPk0fNXLcbz6mhyVhZAIhALh5zdbsC6/Q+/+w7WJ7elngZ2TkN4AinIwOcxyqa2Iu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.6fc52d8b.0_1628187059934_0.08631369621344964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.e2e9777d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.e2e9777d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/fab":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-icon":"0.23.0-canary.e2e9777d.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/tokens":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a5yVP9dkCKqNIn+fRylJ+yhedAJzdGb3ob8/xlI3JYf8KpGWcY17Ztgnmx1ddeoyONA/Y8mOFKOk48UuWNCu9Q==","shasum":"48dfb858f3c587163b97ee1b6a421eb7a944f7c3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.e2e9777d.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqFCRA9TVsSAnZWagAA1k8P/11M2DNl2eL2lvMJSPGv\nX3DL9b2oH6d9GmGCx7se4y+Q4RdMwwdyIp+Ye4ABz7PZuKxxiTbObn3MYG0A\n6nqo9ewPjh2/Ag8G/br19H43e6FQy6rbQ/EG+MSflcCQToeh6Wd202WKSW5d\niLGMKCW/+KS5hga9Z7RFlcf4pWRZqhYY2x9h+faj0c1GvUcVAnDw7OM0CLoU\nr8uNgAqgQytd0s7D9BMzbPn/mboCeQzqQix6Wuf1u0YjAcnZF/GwaESPgtuP\nLLeug+DtxVCpfWS4q6q8/n7judjoG8APw28VHDScrl1euBvcGFaAILqWt25K\nM611gdA+X+E6QIJnqkgvhLNZ0A1kaH8xcZJdi41dmDTx/s5Db+ZtLUhK1Duk\n3Qdu7/Rq7rQcDkSlcZ0kRo4iYWTYnjV7RaQm9abZkgRmypctkCMXJ9ihWJJ0\niq85VptBVBwKbO3qW0N78S5jebNjLT82HS9tf6z+oUU4gxip2aCoJ/gxCPpu\nYLhGHLD3azZcEWKqlmuJdB1FrCBR7QX9pu1nwJtD0z5GPiTBP6207Lsc5cwg\nFtwbQh5s7HpcK9j/ba+tV/vtH6F2Cc9NW94HK+GkhLPvdzZrqX8Qf08AOLgL\nOZMh3pGxc9canDx70S1lXABZxpt+7F5c/cJzCxJt0Qh9dZKZZQMSgt0SRcXU\nurSa\r\n=dAZa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNo26qSKsD0aKhxbyc2SeIboMOTY+5gO+VqlFzNtuVFAiEA0Y8eBZZleKtmELi972riimxiVKb8NJqPFCA58YJXIJY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.e2e9777d.0_1628203653521_0.45982301802559955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.72ff1e68.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.72ff1e68.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/fab":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-icon":"0.23.0-canary.72ff1e68.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/tokens":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tNG5lu+jt4jMZbHHT07r3pUyhmyOM3SJYFufBYvd8WDhWYrng0yifoGK9WPsPVkXUc3SZoiHQm7b9BuWZ5BV8w==","shasum":"293015ce3511eb9e664321948027a24bdddca793","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.72ff1e68.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaA3CRA9TVsSAnZWagAA7Q8QAJMKx/FCelhS7V2bkwI/\npskKWCwXsmYAAneM/tUVYN53301RGDxcw3TzG8tZojg4CpR560w75aUrdubG\nDetaE485AKpg5CvoCPUIucnb82yGEC5tX4koYReJ/pietWw/sy9YMABo+fBy\nBpWbvRADulcBWTDvV5hHtJzcrYfDO5vUyvoylE6NssoXQh/DfUz03mtle/Hk\nh96AdRbvVWBAMVa+zoGx8FDJutAbHVPmHEfwwc50d61xWdbZFrz8PJn5OpLr\n7EJp3FFAfXbRLB022r22B6o5GuVPCuEIWRXzzV3ytNA7kA0CH5xDBfD18ZkN\nk0a0xbleC/nzA67idphzrq87YFQ+Af1wu3b4j3CN3U+2mZkXmH8qNhdxnCCC\nU4oj1Vc/pZw8WG0EywI+wzyvVY78ZcMRuj9DqqfyMR+Pqxu9cj09h28HpwXw\ntgVPury8gVIJh2knE7vpc6mbMPL85ypG8rSDNnPNrRn6VbeuA9VmgEqWwjDl\nooGaHgzY688p/xsWgz5uFl3/TO87C8jyDgFYUputSLYL39dKSoqTbX4Tgo6l\nhQBBqjZtDSfIQOfJRy14Z4japYoOw80pGWQ6QwFSmazXK4WiV5Oz4KSwjGDW\n1N2G09/TX7TO0AunebD1faG6DQMWbZiO66WCMW4QMmLYlooF+OmtVdD97BzI\nnwWc\r\n=1WSr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExJYmDTCEJ4quJx7NCEClLz+dR1xcC1P70r0uKZ/CqVAiEAhMl67Y/sZ7ae7psh7TAhByo3Ia1zkwAbyqkU3UX9OPk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.72ff1e68.0_1628282935328_0.330003415702232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.c527e93b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.c527e93b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/fab":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-icon":"0.23.0-canary.c527e93b.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/tokens":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Zhemg4SJMoQ7pY/FpgNMzQQQj/AM0+Um6jLC8btRV5+uG80hkD6s+gApff6H7HCoyQN44sei8YB3jgGy1CR25Q==","shasum":"aeea8726330fa7828ae9df90a1d387fb8f223042","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.c527e93b.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVOCRA9TVsSAnZWagAADt0QAJslfKTKpj/yFH0E4UyA\nuNsxpOUlL10Ed7lOpIMm8x1qZvesNFKX6/HxAezSW2Qy8ppauwnrgd5UdIQd\niwveQsD8qP8MI5d+2qEeeVhS88PrujttYVXZGGuce0x1vVFy+wI3DRQJqkja\nIw9gbxPXDYNUxdi1a7fFPwLqongf76xYj3oY5Z/jovC/bop4EWCNA5lyXli4\nOoyMDPkuDFHY6qQe4gRV+43b3De5BzfM59PNmZ9uB0tImdXB8Xj+0RsUIgWW\nnz95xHKZaBTDOalrSNWB6XJNu09O6OF242oEX2BeX2ngF1DH2qWvSJHQWSR7\ne5ftMpImPBKwXteQhf/jsj5FNhVD3Y3IQ0GHcq+uEw8QqoooypOO3guAI0Fh\nCLrZ+3XBAwYPrr4wTEJae0/FLHcsezPT7l4qXDhpS282DEg9XyPTRvIeJOZ4\nek7DOStS5RiMF4qJtnsAVBa79U4C7BsExEC2njzYV/GaXB8yJIojwrDIxHZ7\n0MHmwqD73Kc3qQdG+xFse+Tq5q5vCah+weTS4LNTSN5jb5y9xEHEirPyboQB\nYCTujOG20C9N8iBqysd8W35n5L8QJPIvPeb6YniyZgHCSJqzDvqWabiLYfMp\n7SlCJoN6GBMBmLC7M8d2wwhYonYmg2cPAi6UebxuG9B/apphGQX1LBYyGKa9\nTTHA\r\n=n5Fj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDsxkhYE6LO1iJbO3Pdf3RD6v+47wpmv0C/M1eVR6mdHAiEAjb1qg/ZPtr4qQzS9Kvl4OP1ZzeEodOh/5ydcHZLbKXk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.c527e93b.0_1628284238663_0.2684479905560504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.78b1eaac.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.78b1eaac.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/fab":"=13.0.0-canary.b47dd37a6.0","@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-icon":"0.23.0-canary.78b1eaac.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/rtl":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0","@material/tokens":"=13.0.0-canary.b47dd37a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Nkfc2qlw9ZgKi82ktOk6AkeLErPsi5R/hKl7HUOKweQI8u7qHBFn57gJparcWmocRSepWSX76kXcJ2GaH33JbA==","shasum":"902717c4b7472d5fa1de4ca39c26d1d3cba2e52a","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.78b1eaac.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4QCRA9TVsSAnZWagAAe94P/i0eTgcbPjRMWwHrEMMb\nD2GZ1WS+ox94eKv6C7OQHdoFJbgs0/Xdfe5leBDyfz42q/wCS9+SmLEoGx6y\nm7P+PzvbSP3L2bkussMpT85/irEEVsvyrOMAtVtjuoNzzcUlO17eg53B97Ro\nUgwKhIIIwXxLnaX5gZHTDlr208pFyywtQpHGTqMgCd+28dnxJuAoN4RzlW92\nl9hit2Zni6VJ6ZfiKGxLBZ/hBQlNAzDHX+qbaKJmt3bVifqMR+xOdEEtZZob\nf+KdkP+IZemRgybtXa5btmW3tVdJUS6Tgj68yO/N3GnAYqcTw0ZsLIuDoe0T\nU0JB5F/YtsLOSEYPqaaPkqaY6mQYb6PkdrNS30VxkEbOxZUumCujumABKAUj\nS2t0QW2pUkDUNusBDxpU25Mh5wdI1evTBIph1tq5f6YMdZ2oNNK7YDJxN5MC\ngiqO4qCzYfYasYEUoRahAKFys7TP2nPFBC97Z13q5yR/2aY2C78jL4VqpPTg\nzyZYOPYcOpBVYECeNQ2P242JdHQUptQGcnZzxragiW8Wv4uVp3zh9R8z4Xj8\nGrVd65xuv9HG6nNeD7Ns4If7fzfIWuxMeIG9sHlQwXW087ApFuSK5gIdfjZZ\nuTpyiSaJnmIP+Oe8+Mw6hUUWAkVj5N57UYPSGdtedTysJPM+snStVxWTZkLW\nvDRo\r\n=4Q5u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjRrsFwdcJwaGZxmx4jM2GgNxCMV+iRtm8LLpoWb4D4QIhAJW9n9fiC536h716fwt/JBzX2bBjIbNr64orMpIVxr6j"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.78b1eaac.0_1628532240361_0.4935167432140488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.a8a4ddc9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.a8a4ddc9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7249a3060.0","@material/elevation":"=13.0.0-canary.7249a3060.0","@material/fab":"=13.0.0-canary.7249a3060.0","@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-icon":"0.23.0-canary.a8a4ddc9.0","@material/ripple":"=13.0.0-canary.7249a3060.0","@material/rtl":"=13.0.0-canary.7249a3060.0","@material/shape":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0","@material/tokens":"=13.0.0-canary.7249a3060.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FO7WBx8ykGEWISUxbk9pKGoB6t7RdTyGWtxEbsi2YC50a2ShLXnpvXtuspKA2NF+dfhuV4mtgKYwXUZQVks2fQ==","shasum":"f5545759a859cf7e825f765fee3ff71f9d6a90c9","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmoCRA9TVsSAnZWagAABwoP/2CXPSYsAk8ifNvQIyOA\nBcjC+Y7WuUJsNM0v65qDpw5PRa6LPCujJWxChHYa/C4TVS1RVr1T8Y2qUlrU\nZ33uHuaxbVZXWSHk3BBgUOn20szrLG4+MOGjSVX9HWwzr5oEZY6gtE4vdpRh\na+c6lHBOcpMPJ+5l74lfyFWL2LOV40RTQtMsa/AxaOp8PrfWG0BwZIGrk39B\nsznGYwLWwR/FLGgP2yUfEqbvFrkVMsIMd4FG/zhcRRZrPmKCs4CFPRmS9Hd5\nG9RkRFPkI2awsogEVh5QO+rRzCtVq+j4AuWlXsCEoXJjv1r3EGA0UjKIKfZ8\nhcB4ffFLbyzJ+BhLVaUpVvun0qdmSAMN+lcxBZWTniYRRiEYN94l4yG734J8\ndfjQvhMk0VqVGnrsdRK+ZupBbaqmvuAIZ9UsZQFklryvG7CG8pV2UMR9cYgG\nt3T90rwXs2iz6bfxLsyusgE5GIza7k6661pcaA4PYmiUAo7gnwX4kWxjw6D5\nqOwiRoCpZFDVZL0PZb53DjDDUITJXjsJ+0t20YZ+TpuTUocXz4C9R6vWJDSj\nqwqWNx3we9TV5Ebl20tMN/UrVPQDrC7I5kRDCrqCuHFl5O9PMl/s5HMsWRce\nIS7r3yVj2JDB9Pz2eZ6X7Byj5MgczFf2G6PGEa+jFmUA7Y2Rs5Y+slx5LKr0\nfWNl\r\n=re5i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF5jQxM2zlHLLYa/1mr6XpNlJLtdL9sCq4caIYbulINKAiBaFhicIzA4h+zuvQHtj1ABwals9jcW/vTiFWdGjdazzg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.a8a4ddc9.0_1628621224067_0.4729649407512768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.99fc0632.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.99fc0632.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.f4241a42a.0","@material/elevation":"=13.0.0-canary.f4241a42a.0","@material/fab":"=13.0.0-canary.f4241a42a.0","@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-icon":"0.23.0-canary.99fc0632.0","@material/ripple":"=13.0.0-canary.f4241a42a.0","@material/rtl":"=13.0.0-canary.f4241a42a.0","@material/shape":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0","@material/tokens":"=13.0.0-canary.f4241a42a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eLGYIkb9qLh4ofDHfRBT6lV6iMf7IeqzTXjxScHiCS+2/ln0HvZcrMxt04rMt1bSnBji5APiDuDIN3FvCZd9sA==","shasum":"ab494d3198e6664ba3d4d70ba4196070c14512ea","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.99fc0632.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE15CRA9TVsSAnZWagAAyYsQAKGtiFNfQuPTUxxBbGBw\nJ+Jg6GvyRneOaQemwuALt7483yOekQWUAX4xfCdYF38tspRWQJ8ULYpQyQsb\nn+0Yqi+hpeyENdIjZaEP8EIW63tLDoH2LdQ1M4ykqIy8v976z/oC3d+N0/Je\nVvFuVhbzRwFRcsVaEeGsVf/H1D3yPONfIeCcjUZqgbHhcgD9tfw8RHOt9P2j\nRjt7ElUFsNEs1TRZJ7DGkHtdnhkJZBq2f/TYX7tZ+PB9DlNsi98dnguVFOab\nkDPwPVK7+eh1Vl1LBk4d+/dU1b1mtstbQ9gMaNW9UVgkh84KY7HIGZb7pm1D\nFGiF3mdbyNLJG7idcmJ5q8l8G/ImCPyaJVVn6GtnqNU+rJNqMwDNkpuR2/lV\n9JPPhVTcBrafLb/fgDm+x884GknYATGQNU83Hp9vPVvFpRY4+/4TeTu9hvIB\n2jAi4Eop3G7ZokhwPkfoiK/ZBHmlHViHxL4PSVf8Wff48xvMc+o75DDNDqLb\n3eENnnlVNjXAErhneG+IPdfGirZ9HgbAurinWjZDzPzYRIRflbeR+ikFO36e\nUiltl8DOSj/SWT4PMgEQK16MpUodftyAXc4d7HaR8kzYSFgjCw2s0gXf6ki2\nwK3uuvzVUjmccKaWttSKeuQ4zz5G+hkoESz5ZP/RSVJgkKokaR2C8B+Wi1/N\numNY\r\n=JJH9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBNXYju0m1jr7Kj/uw9flNHfmeYGP6xdT2bsf9dxUN35AiEA9SJa2zjqtocQY7xjKScD7TNwaHV1PaqHYKnXwyZSddk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.99fc0632.0_1628720505717_0.7915448972126906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.3f47ae57.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.3f47ae57.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0ad12ed3c.0","@material/elevation":"=13.0.0-canary.0ad12ed3c.0","@material/fab":"=13.0.0-canary.0ad12ed3c.0","@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-icon":"0.23.0-canary.3f47ae57.0","@material/ripple":"=13.0.0-canary.0ad12ed3c.0","@material/rtl":"=13.0.0-canary.0ad12ed3c.0","@material/shape":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0","@material/tokens":"=13.0.0-canary.0ad12ed3c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xbu9FAsoJ722YOhnzdRbIvp9+DJ48K9tchybyL1jffWpYat8L1Atj7PFmm30/ard/3OIjrUgeatQgjm0kosZag==","shasum":"3ed831a457fff63b0ae1fc0a62ce634e0447dc81","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.3f47ae57.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGpCRA9TVsSAnZWagAAHnAQAIAwqOSrVU7mKcWVkdqf\n/iuOcDav8OZ/T0pBGAkTiH8TT4ciT+j/8kTZLH8BnLsEtAzOpGf74ijsjHJz\nnHGiZOnxWsFh5Tt8Mh8f3Yjxiswq/eqwS62wh5Q3EcKGQHEJEzkc3vzv/bCb\nCwVV2Iwusmfg3KX01FGVNOb/CoS28h0JWODCtolwqzSMZo1UXcEXrDaql9+G\nGetoP17ydXl54EIeBIcvs3T5XypfKWeay3bRjsDc4rj/hCwDyj19D0sdwFba\nrBYPul6Wb4o/l+yR6jKZUMTcBdlumo5KSBBgxNEr59Trdc/XGqplwbOMa1jQ\nh2j3pf7HOYPlB40Fnl1DWbvbHpbF8YSyPBkmuGgBzL8vnly9TLoXTHpgSvDR\nZwvO629OgAzu/+D3TzT4mZ0dJdLV7+99gm1w6L2nF7nlvXpg+bkTDaX43J7c\no59fEdRUYEncJd8Z3/c4EJUuPgbyZT/VyGvmOO8PsV7GgvmUCM71yk9mSZZf\ngTBJt58UZaHNvACHxIZctpWpsc2uZ3ZJxzJP0M+UtgJl52A+PIBKqF1Hz6xI\njz/yiNrsm/cQdlnste0mas21Q0v/tACXGtSj4pBPa/MdNk9yMlVXB1R//n5D\nZSIRArzK2iLaIjZvXomXa5w8EpEeBGA1ccDiKh6e+rOfxW8qiqZ5UpkqnJiV\nauOj\r\n=TWL7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDi4d7Q/LAybDpWUC1PkslR4XY5z/dQbnXLPRnkfEbguQIhAJKQgoH7bpBHsDqq/ExLw/iEm1Sopc1Et1q/c9chI/hg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.3f47ae57.0_1628791209723_0.5597316920798103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.6b9bfc32.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.6b9bfc32.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.077dcfcfe.0","@material/elevation":"=13.0.0-canary.077dcfcfe.0","@material/fab":"=13.0.0-canary.077dcfcfe.0","@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-icon":"0.23.0-canary.6b9bfc32.0","@material/ripple":"=13.0.0-canary.077dcfcfe.0","@material/rtl":"=13.0.0-canary.077dcfcfe.0","@material/shape":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0","@material/tokens":"=13.0.0-canary.077dcfcfe.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SPmV8jZeul0xourAXta0RriCx5DAU4a/xdgfK5ymNtxChwRA6FHGv17pmo6pONMOCGi/Qpm/qIXkXkXwdt1uaQ==","shasum":"6c5149e66ce9a910604401187c26f6a44d93c321","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.6b9bfc32.0.tgz","fileCount":16,"unpackedSize":77060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdSCRA9TVsSAnZWagAARsQP/2BCf4/5IhcZvk9tfpME\n8XMMFC7y18aDED8FhbE8hlfc+o4/pLHrcyFKaQhqzvLUG2uRkEcZ8rw/Pdm8\n6priRC30oZXhgtVnhXSZ0GX0KAERVa+IH+xt2eIEnpB3HbAlj3z/Do/Ls6UC\npC4QzMJdIiwhkT0mCz1d1rWefZZsgRFAFjEUpB9bzHlWyKjmWUGU2sEsW9K8\ns0GSkyeTx2zbOmjuMRyNyMjIAsQwy66f7n15GMwL5fSo/IIi3L0QkAmf3i+f\nTFqsAiQTE5v2iD22fHWh2brVFWsYuB27tshVcvlVhIeplvagS689VimOWCDI\n9lo8ZobTRAiGmAR+9gLWbUY3N8C5uqFmza4Yg2HGni4PblSFjWUE/sok94Fk\n+MQoAtNJoiwj/IkyD6eFaFjel7hSWeyhFh25IWkNsIp/Ht9s1T3LMXYkyT8L\nRXIvBMRQVOwDPJRArTs0L/YN8HFMj+PTBg3R+kZN6I1XRDiXiByZ3E3rpeCu\nAtEHSqhRyS0dcyuPKh6js0EH5u8FMP3ZzNBBYS4jw+6IBZh4PMsaMUm81jAk\nv/ZBMaFm4UmFPqvxITB3JBHNMhC9iPVW9GUVzkPu/Aqo2tKN34yYK1zI7cOh\ncr0dJwCV97O93poxfdYRp5Tc5/HIDi4xG4WzG7i1VW9tjoFVz66tv+EK90Kk\nDvT4\r\n=7Xa8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvVBnCV+0MuLR1WLlCGixqvH8IbYeHMKBOqJZAzJ92cwIgMcJd1m2OQt72SNwBKuUWHZBdrYOwQUkdNoW8JBmuxAE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.6b9bfc32.0_1628792658685_0.6850747150212544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.c89ecc63.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.c89ecc63.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.2fb068fb0.0","@material/elevation":"=13.0.0-canary.2fb068fb0.0","@material/fab":"=13.0.0-canary.2fb068fb0.0","@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-icon":"0.23.0-canary.c89ecc63.0","@material/ripple":"=13.0.0-canary.2fb068fb0.0","@material/rtl":"=13.0.0-canary.2fb068fb0.0","@material/shape":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0","@material/tokens":"=13.0.0-canary.2fb068fb0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zhgN8Q225fvgK5WpAfkaXsiKElaAgSaKOn0NnywtYxJB8bJa4Ir0jYitf+MtALHK25DLNsucbFhw0gWwSw/hog==","shasum":"30b8929399be5ea5b950958cdd37b84a2882f813","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.c89ecc63.0.tgz","fileCount":16,"unpackedSize":77038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2SCRA9TVsSAnZWagAAZ+kP/j9UwYI/8fek1e9rzt2q\ntuv0bU31VKZSeBRFeWnon/zAe2E8NZ5jDXfOYrep950GQ3YXWqUNSMPJhkW9\nfhgGK/xXKLflONgJ4itQlLZ8VJGxFspluP+heZJeX4z0saqf/5sQgsbVwboO\n1mZgfh7bK0pvBpeOWq11Wsl6pVmpIUjHAlGLt/3MOIDFj1/ubuBVspXkt2Gp\nEnozz4SnguLI7pTKB5vMS3GZsvGZX+MfyRTYDP4m/hQKk33d8fTxTaCPFpLY\nOYEzdT0RaKtJAVw+5+qhk25Hd4scAnFe0WdTJaGs5EEZ5XqzMAw+TGvZT0bW\nMfyhCwcxj5mRK+Ht/xEibghzJfQBjVCtPDC7xnGoWtOebe1BxEjJaAZFnNHy\nFprBYBrgyzEQSYH5zDhqNQjTmnvrI6nFLd3efBaTz3nU9q0kKQBWQHwo+wAm\nKhQrsB98i5+wa/K6QOm+ETDiyebeziazyoxANtyDoqxdrM0VfcNGOgmEWfzI\nTXGGHl93ZUeIg3T9NOZmtlWLE+QciQPAHZEEijCoJhzEnya+Dq0nIjB98uzh\n7U2GLKo+vMBsFlXf4IouVxYx/maXcTD869qEfWJJA1ap78jHM11JC9ETzs9Q\nUNp4MHGhN3Rlgis+83jo/ZNAbfmm0jhOWP3MrXHcJqjdvzloOkiT2e9rR2ZY\nmaDo\r\n=kt+E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBimQSmKkC5dWMI6wvehDIju4vv0LMZtzaIk9btx0bMUAiBqjkly4cit7oCz6hqWSbH0crS12Nbz8oQazhkFYX5mXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.c89ecc63.0_1629134226046_0.08456608019609191"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.59de86bd.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.59de86bd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.457d89aad.0","@material/elevation":"=13.0.0-canary.457d89aad.0","@material/fab":"=13.0.0-canary.457d89aad.0","@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-icon":"0.23.0-canary.59de86bd.0","@material/ripple":"=13.0.0-canary.457d89aad.0","@material/rtl":"=13.0.0-canary.457d89aad.0","@material/shape":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0","@material/tokens":"=13.0.0-canary.457d89aad.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k3HzinbVpKsewuHJvmafPVjIHwVz8mW/nZ0Fcf18arjUQ413FWc/9Yzj6Dy/QOrSVZWeSiK1wIEUIyI8oteYFg==","shasum":"62f385f22afd044a18dccb04c0d8585b1dc02f48","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.59de86bd.0.tgz","fileCount":16,"unpackedSize":77038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSXCRA9TVsSAnZWagAA//AQAIJ87QWMI6u86Ps4lA/J\nR5p4uAEUaTjpUdQh0o1ZAjbOw/lyqDgkgxPJMMkQymxUq4H4gdeyjrVO14TA\nxQsbKmrajmK696SvzGEd8B/UgGoFPv7Hbxgirt7m3dF5UXkbj8AS0mRf1KZj\nLADu5XcGjBsvKvBPN9CoXGEyVwGvYPlBZDb/jW5zr+beOuGE/Fil8ytRW2AN\niZ1zadTCnYQrEbTG8qAXIjidG+tp8HZo9F2+u4Q4HOAch6l+edlOURVxJC3U\nNud8B+VfnYF8a7m23smNInIFK6O3AtfI81Jnd0rip7W8qMXgvMKCEb+s8lvl\nc9Dv8DNLDBI8KAE2GxdfNzOg7QYjsllKqh4S0mbj4787gbbV7fPMBDyDH/zi\nwYiPnAYre9cNy/IMxA0QBuuvEjH3ieHrWXVoqQZ/Rt8v0RoicpbngTo/rSxZ\n5T/P3svtnt3h46wMU2zP6vq7bSCCa73R8i0nzeb6XFYUQ91a71cfJJJAUa/R\nz4Uenih0S7Ao/df2CWPoAAfsURG8FRpx3wMbsISzGFH+6/OLixAgVt9hwvbr\neS5pHblqPil7V0zOLGHsw6CTlZ3XMZ3/WgBX07qH/bHD/OpIjUHpyom5b9FB\ne/bvzoP6xzLQ5oSD43pwNcMoURaxy6G782IQzM8OyjPoUyoGUftqOdsifJwB\nE5F6\r\n=3C9t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPPhLQUm1BaVE9Lw6Miy4IaYtl9RPq9qI3YNLYa5T7EgIhAPa/dxzuKTlprpzfudwDU+780ZpttKBavYLvlpy3iWQM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.59de86bd.0_1629250711421_0.8796998375330751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.dcda879b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.dcda879b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/fab":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-icon":"0.23.0-canary.dcda879b.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/tokens":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LcQG1WrTPYIqpcnSpWetm8mRVoLm9dNKKF9deBz77SbSRmce9wFi6WjjPFWXo6VGowLPdYgPTi2QnXQsIN5sLA==","shasum":"5414e064ed365364661c815b1ce05fce599ec92e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.dcda879b.0.tgz","fileCount":16,"unpackedSize":77038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYheCRA9TVsSAnZWagAAMHkP/A6O+ueqaEa+KeE5BHN/\nMa9G3q84t2iW2Be8KuoVltL+T3CgqN0M3BnVQAZflLw3X5GZ1GCPjZtE+S1a\nCFHr9YvEZGHB+C5mSV0gJbKwT3PYmA3wZoUKCKf/LMMVPVCERzkWcDtnFtH2\nHXQ8/vmKHIgjIejr0thc760INUpAo7gF/jXokVPgxTaBa+Qikr5PVwc37Pcz\n6L4e7twOiQUTAFYuH0VFdB0zUt27IS45VvPkRglJ91G68BtS6DaFKxQsIG2S\nl4a5GUpl5hbDtRKZlH3qGcg8itGzzSaKDZEwrkn/Asfitl+D6ZwhawQwX/DD\ntoU5tJOjn2k7bDEmzEI5XKJ8ibkI6O/JhUo9s6sa4ny22Yoy1a0Ykv/IAE6F\nGkgK1l/EPELQQ8OUO0uGQ/Cy+oh/dQdmVNvqFSIO4XV2qdiKq4OfSj66/QA6\nD+d9kAM7wp9GykYWfVFpS+q3o8qvs3b1QMF89acJTmsXqcad720hqUCXf97p\nXuH1ahU9urT146LzA/YfBBaRHxQeUmN+0U+HQF97DbkUuZd6IUFYLwUpJlSt\n84YkZLySnBk0X/CW1rMYpIbl+vro9cqtNHrQA/4P0dLiGZh3WbRZbr5ds0e9\n/FLce7poemuwIHb2fp6euZQKkDA2IxS4I2pRk/aPNtBJiRGcAzEINKnAuRe3\nkXAw\r\n=+/Mc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICVTXL3nDuzj5rnj2TTSzAUPHdsdjAtrQNOcM9+7eyMiAiEAgQfo9IjpWMdAVbJPcjKOHQsZiVgpzSPK8ufuNOGe4KY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.dcda879b.0_1629325406172_0.23140886017317652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.dbb8b366.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.dbb8b366.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/fab":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-icon":"0.23.0-canary.dbb8b366.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/tokens":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c45ulHH1+zxi8PDB+IOOH168aOmIxrtPGrz0iZLGKTR+ASkTpLgCPYyK5yY/CICkcDjP/GIB0n9RwJnKEjG03Q==","shasum":"1b33633bf2ef8073d74c2676c8c3baad38104c76","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.dbb8b366.0.tgz","fileCount":16,"unpackedSize":77038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKNCRA9TVsSAnZWagAAr+MP/iSTia61a/P3rQLi3eGo\n6D/oMBeHFcX7MxpMvij4jADzlGNrcfzwH3HZthlKVTnBSESVZW+UeoUAkFVM\npYszRKX7bdE2/NBtY3xg+uQ4aHt14QsmSZThl6Wi3nFyxW2626J4D2D4RYkj\n7kF0e0a9tvr5oLCIV/erp+H5Hj7sYpItY8iBIxpt+0DmGTrZxjP/ApO2bp8Y\nwXncuFX1zmCIXtw7MkcPKYU/RBCtdw++TEOkhtQdjNnT0pg9vqQisM3RVLWW\nUocZSsTFiPr880wPJd+jB08AwlOetBKS2Y5Acoa01ruiHhp4p8vu1wwQSrhS\nteD/pOCE5oNLm/JdLZLcKJcEB1yArct6qWtnRXoLtHSVHfeQAd4NqlDU1Dot\nx/7V2umCgns0sPsXRqGNq+/DX31eOiA8jLuBAUm6lUyAXxYChcyIElLhYtEI\nmyrVewTfcGknI1lEU9ExGvI61gmP56engskajVBu/cM370OM+1IjynzTXbbv\n0tLk0FW6ITo1k2u1C6yM9LUwTJtyeM97XNKUmJCJDMWN8YwBKI2IBWqZ1dgO\n5aI7tVRkl6Q5CA3bJeypCgMkeHOZ8OS7qIX/7fL199YtnKZGiQYVZFgpb3rD\n4LeWjq8LGlrYsMfcpjYei/5Zg3IYsVwu0SmfK6MgZM3MZUp34NONrHpI9tLr\nYoSa\r\n=GG9V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEESPOspTwJ4IFqJ83JtD0JMnefp3HFUm7VjIo1u2JAlAiAB/jyhSXMMXRyCHt6IqolLTB9Q2G4VcXo7ROy8T+QFwA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.dbb8b366.0_1629414028912_0.5035128860353415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.c6e3060c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.c6e3060c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/fab":"=13.0.0-canary.43d2eed2a.0","@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-icon":"0.23.0-canary.c6e3060c.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/rtl":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0","@material/tokens":"=13.0.0-canary.43d2eed2a.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CNyw8VIghYwGG/wX1ka7JXkMQcnkjy1Jtya1EDlMpc9feRy9MQGoeIyppvnTnvVUMlTC+VGJNyzPB81c2Pp9cw==","shasum":"132ce61cbf123cde9386ffce770959f9aee59f1b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.c6e3060c.0.tgz","fileCount":16,"unpackedSize":77038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuL9CRA9TVsSAnZWagAAbXUP/ReGDm0x0/3IoeYI3Lv/\nC5o+avnsVQitYZKw/hymt65JAfZ8butqO4hWIkB20dquPSLq4ORZJADnJVm5\ndOpT/pZwqy9EvAUxPVPCJz4dimXjpbepMqFTnoX/U+g2Orfm+q4ebVH25p4r\nObR8Rz/vkE+n18dxyU26ZWyM1n1wnpn1BuUSoNIqpG58kn2pIQEpjPzDVtzU\nP87gMCXZD4ek2EvKFJxFnRP47j50BVasLMcTUR/g6FFRfS5/KrSP9b+qt2tI\nvs4i0/SP5dC6iWL5wezV9e5VeYDOIQpY7FIn1kRtcRvZLWCBd5gyCQ2wScEP\ncHNZCWUhfC4qXhtwHXkLuggKEF8vCdsPblcKoTi17s8szrg6SdPhfz06sZja\nXf01GawYpTPaoudb4B1/K7DPg21SgZXdJnWNP6o69bbvCI3h/HfkS/VDDG9f\nD+jtCOMNPsVHyuJhifIVA4RycAK1d9S6+Xm+JIJDqBIgW8HG+noAJZrD6HG5\niAOOoG6n4wgu1ecdtQL+joY2cjNYCX62NQRSuTGT9xN3cBYZKSQjp7Ioyj0Y\nQbr1zPe6oQkXT5pvWhr4bmyh87MeF7Zbsb3hGjR0ESbLnIfR+8Gt7oKBesYK\n7CMPeBILb4a0Lu3yG4LOgfDl84YQdcpQkpwaC9VbQNuBojMouZUjWBO7zdCp\nECF/\r\n=miNZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8tY/sryozsIGljcFW8PAfiAxrRb9IGEQ5ga2N1ddTSwIgXexquKlbXd186mVHn2QIm0kIjiqjydAiNkFTtXE+oJA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.c6e3060c.0_1629414140898_0.0410089607943358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.03120b7d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.03120b7d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/fab":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-icon":"0.23.0-canary.03120b7d.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/tokens":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HNFLXek/s6JRUU2w2BJqFKtNsTqGUwJ/7erXp2rANlx57nu82cwDEu8qL1cLPzHLiuAHm5jf9h9vu85z5U2pQQ==","shasum":"ab511c980cfe8493085af8bf2c7718c59f268c08","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.03120b7d.0.tgz","fileCount":16,"unpackedSize":77038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvbvCRA9TVsSAnZWagAAhsoQAJphJQLSl3sF95Rn/f1E\nHxCnUdIHhpDOWE52V6bOXnHin+bPa0qPm2PWEFpmgGYLSl811XYysPsT7lma\nqaNalYAKG+mqYzU1cP8XHpadseNj6oW+X4LtHJKULeDWFQoIO2gA0M9QpSbY\njh3Zxl6BKM12jPbm1i85CbBQC1BsWLCCvlUv0RNBdG8Nj2q5+1eeu6mYPCgg\nNX8wN8qkUjm9TgQ7Kbe53OP+GCpNLHxqwj7OcxCiApBFntAm6QL7unbGwb8Y\nPpL5zXLMsHm0Y7IwUDOW/iUKc4wWVezwf/tqLQ41mVAbxjULn/bEG4RUvBqK\n2caWCRr0RF0k2u8mkPHhxBUTz/B8eNSjSPTc190eOF63GZ9TkL5KAtygcRfh\n1U3BFSDBuvKvtaq6/cHIAC7rFRifgJrMj3mnl7w/xBg5Tb2sTP5UJFUq1+BX\nwZtsyUWPBBRpShTfaTji7+mSGHi0uItpAxVGSAMlTeCJtc93T+OgbUK1RZZ0\nE9wI3ma0vv6ZJmwcCyzRZnQKFA6JXSp+sxOdE0blCWG0FPf+agDhkzZMgvnU\nUarRSBle3ZbySfaR5yqgO/a31nNoYR9rVBM0SU7NP/s0JUVGPDwyTCO8UJwH\nmDClxXCrVp7nd1MBdmeDlp3Ax18fIq2AU07p28vCLpHPy42/gk44D92lLeNB\ndnTW\r\n=+7Tv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFv2S+U6rTLnjWl0nqNRCljUJDIfNXJRJRxh6Jf8c+eRAiEAkroAyB5DybT1SGpHWo7ED4R7HoJ0pCjnKqrlrTq2y+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-fab_0.23.0-canary.03120b7d.0_1629419247204_0.7665474696854389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.d75a5f74.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.d75a5f74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/fab":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-icon":"0.23.0-canary.d75a5f74.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/tokens":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-265gnXjVIFz3/XOpPZoeQt4W8KNILvQg1xQc7L30nGs8yZg40pP25NCW635JxcPyAALK/JidoDSUi9E3mzMOlw==","shasum":"3c2c532697007d7bb8213aff642d005d1e8765bc","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.d75a5f74.0.tgz","fileCount":16,"unpackedSize":77038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2AvCRA9TVsSAnZWagAAtm4QAI16GOvdn9ZZxChfoxft\nbreE9e/vVlg68bfPuuoxjdH27hpirvRSq2bQDYhKMsPESY9bfqXNpdN4qAXz\nGwX4WePzxTJUX/0MQySIIYjaQKZHjTrPZofOBc7LYvP6S367so5ynIT2Tp7k\nPlxTsz4MNu1WkaJMDSo+ZIjamRhPQav7xmgjV2Fi/VYTn93ESOk0BUl+FVsh\nbttykmznBtiigxPK2J4bKr67R5aiicQAvUuoo2xlciLHbOVDrNBYk5E5t0vy\nyR2UgBKrBG/jpeVg/EP6Jknc6JIuufJJPTaHLT8eb9rhN2FdQBhZFB2Ylzx2\nXdLODfz2reW9rwF9wqd1uW0p8Si8ZIgTZEP44PzvsdLw8ZJV3w/8wallTufB\nMR1UgI4973Yr73ggNqF9ckEMMcalc0xwBXrYoVfSnhVvg1EMSO272s7cVs4C\n2Y4e/23JSwGbYmMozboUktjkDEpXyPITXGstd2bM+kzDvpopOazQJWXKjxTW\ngQDOqVTGPsDmhE6v00Ju67autTKar5F8BIjeukJhih3wSniuvKcMdxjDIg67\nswQXMVHzwQCfUtjzYgwFu4LQ4/xRV8rsMHQMMpzETGqpW3mE9kC2uh4GBcl6\nQdilPF7uJQiziX4sL5sZRaY5TSf0lQBL+NBVY5MM2Q5v6maBcvw73umgmiQn\nZG/V\r\n=Lbfq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgPC9Uy6MO+43TtkQtNy52reWSWfkA9hgeI2h/qDfxcAIgZ9Zu8BlL4ShRq6HibS8ZEU41XMycgYdOUFouV/wWedQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.d75a5f74.0_1629446190720_0.10466480049010074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.3d79ffe7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.3d79ffe7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/fab":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-icon":"0.23.0-canary.3d79ffe7.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/tokens":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J9Ou1RP19kykHwbkZhaX8QJgYpqRorKgZo2F/KvE2D0jKVWNHYKkIvwtYjRc/ZKhZVWm0CFhsbM+lzfFr4W+aw==","shasum":"4e7df7151749bc81a3fade99799c753d60d4f165","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.3d79ffe7.0.tgz","fileCount":16,"unpackedSize":77038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SiCRA9TVsSAnZWagAAhMIP/j2nyDggplpcpU7/A1Wt\nZXi7I5osDluJLY2lTSP8xisEKlkvCmxmuWkeN2iLHpYwD9Jya8B23bfo6vix\nDcX10M4EtWF23mv7gJI44O0G78Z9yaVk/cjOM9altFDVGYKGbTyF9judfNeQ\n6W8WTovwdEn03of+QiRN0Mbjj3dlTeEM2L602DcmZiET96P7RUzt4e+5bH74\n2fA9U5i+rTwlF9R7bem5FW+fWagHHodwgLV29Ks92dgNfFOHX/yxuN0jGc1d\n/BsYj12HX4rdpd7vwA7aENJ2zN1GpNqJyjylPADw5TjTNBm1S5iKq6Ux0e4p\nqSwDkXYEIi/tXrS+WIEDcgO/OHOc83iamVi1RFgxP/EtGJ/3OykEBZbFfv9v\nmO0YNo1/lonA1/51ObMeVBh/8BnJgwtZUC68EYhbggxA6lNzwFZoWiIzwXZw\nQFdHq7kOSO9dXxnVuOgNNGY3VeJOLW+QNu9dBPu/elWZ+OMlHiceEoAIEm0U\n6BVruCKSzcsFgN6pInqwDtZMgSWBzPUMl0gI7kPdIOUFgA4ghkmkB77BI32b\nqU1NKosKPzxEk3kBhwB5GQnCFhXB/VS9bWldRYkzjCpiVWfCJKmlqfNjBm1u\n6hiMaXM5ajV2wUXT5R2ygzplcoKYQ18V+zpluBHm3VgiPzIMLKlxAzgnDzev\nCMrO\r\n=snuW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWlOTde5FPTe5wb2cAPzMSB23pmzH35EexFCfqlDlLQAiBizrBc47/ypIRWgdve/xY7v7+iVaYCg3iFwBF5uzoqMw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.3d79ffe7.0_1629480097884_0.3760452767113811"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.02213ebe.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.02213ebe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/fab":"=13.0.0-canary.0a9069300.0","@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-icon":"0.23.0-canary.02213ebe.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/rtl":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0","@material/tokens":"=13.0.0-canary.0a9069300.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KdCgHHXAJwSMRyuGWEXMBvtu75A0ELKrYJcv/0IkJtd4fJVogXUnG7LbZx4H8cM+L53dy0+I93/0WE4NELbf5w==","shasum":"6685619b73e249ee509e2b90149838676508dd7e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.02213ebe.0.tgz","fileCount":16,"unpackedSize":77069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+W7CRA9TVsSAnZWagAAqFsP/2oAgpwfzyKRtFACdrbg\nWXHjDhbHt8elK5cuHoyqqGJv87cxLV0Gf6E2a9Fgq7mLCGYz8MDyaiBD+C+M\nPODCCXGlQSIlCh7biexKKYfGnWs3uSHwtJriG3u2YO9Oey8YF5Jbv/eCyQiM\nDpefyWXxHprpSruwDWWTr9mX0Desbbqc5YcaH+S/DoUcMM7+Bd/e5OYjnykP\nRwEE3ZeYzQwbFkRebc6mgKfH+QZGSZIglStJ+t+mCqamJr4aNkLH/eglI0IH\n5paOnZyVYiiDrV5BzTi+HcVpg0wmaxWTkLuiZNm+fZgs75Bzn4kTWUHjz0m8\nHvcEVWcTtd5u5nr8R4QXsBAQkP7EuvalbgBzrVpXZlg9cvPo20bGpYc1E+QD\nJ9lcyh2+ASGIRh9S0TWiOLDh7LoHYVX7KXsFPRsEnc/Vo0DlSJTqWdSyPrwf\nnarHh1GxukyV655D/EAwZaFSdllY4ZINvvs5s+E7fxp2e3M/F+DSVOUTJj+V\nSY4ktmrCK4FnRvKywfuaUnkjyKesdPcykDX6qFNbkVQ37pmNW7rr6HP79t4R\nl2EIEPBuUCwxsykZcyFPHZVLHqCAUdRfxy4E42WqR1/b/xmlQSAUloIupoj4\nP370hi7E8kNJQ9VdUez4P6sQT26UJaSxoj46cFeQMq2avh66YjMn9cXdviH4\nJCcf\r\n=qHJy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnlLkyBL+zXFjs+LSECM0VrNcfO8vUfQDF7v5KOlqvqgIhAOe8oE+m4VKdSUHHUadyJtAuKIHnSOZ5g56FGwn3nHD4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.02213ebe.0_1629480378953_0.6092368235059968"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.90a999b9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.90a999b9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/fab":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-icon":"0.23.0-canary.90a999b9.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/tokens":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-86aHxUHetMM3KuRE/f+3BlUIbs0GGREz20q1w+k6IT9aYz247O9AT3fpQ9RfG/yPvJ93FiVEV+bNIlKjOYlbAQ==","shasum":"e0cd746672f59950161f6d7127d727149b236aac","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.90a999b9.0.tgz","fileCount":16,"unpackedSize":77069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/emCRA9TVsSAnZWagAADbUQAI1hRkMPJrjEKUs1zR78\nejkie7eZBiFuOxviUUU1JCXXdMYLtL11W0lx6GDpeqvDuwn86jCpQR92S/ZA\ntlvijX2WOFNsXUU6aacCqcd+gTZbNfWzHk/QjN0JAlqXam0zuURFCJUqEnaU\nmhQQuAD8TatFzH49ECOeEiqM9amBMkvnz6hrV0VfnrnHnt/TjIys/9FtRAhp\nN1+iW7dUzZzXkpMQnBSLtiBmkJuefrQmsu1VFTtt0DwgOw7GwJPDS/Vo1lso\nZP0O6yvBiaNhnRh/uONLmjH2LxuA+5dV6fTcWpRDYkqebAMHL3rALWw96xjU\nMdhoVo1gJwH6zMma3JkdTSg1jrnMgHAXD8KAv+P7w9FzyB4NxlDKCVM96q6V\ntlXUwFJD0BxlMOtq3dfcjomfNloL1UHjOqaoP59qlH9uB7WgH+j8M7KVFjMA\np09OTEWdIfKKVPdlfy+21tEGlQfe4pt3KQh0KA4PTz0Br5TkIfNilxCIBJqY\neyBimBJAF4B8IJQQZk/Ms5vEnJdexvn7O5tRKDGPPkWkANOjUPrzPjO+M5Vb\ng39Nlrlr03UDhndMc1BBw8iVlVtFz3ofKrXtNgfb3+W7zP5ot0jw/v5waxYl\n9fx9eTuJRnr6/JKgZR/Lw/RmOPo+ZE06jN8VaYiOKMEUPlutUsLPb6NAWRf+\nUCy7\r\n=Ynf0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVTES43mwYAmz+6AAIm1A8DFj8Gx7t9Sxtdc/4fp8zsQIhAK0E6tQOg5BH+9bzd63Ke7GsNRK7sNlsZPtI+sKN8o9c"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.90a999b9.0_1629484966372_0.8454915835083305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.6db58716.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.6db58716.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/fab":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-icon":"0.23.0-canary.6db58716.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/tokens":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2yRKRSr0oSWhCWbd2JeRkd+cip6LhYDC9q6DOIH33Uz0g/QDYJe5J11VFLjZjOpwrjUJtFbXr1ywXM/70CZv0w==","shasum":"0b63cdb9b1a9d5a16031db8488886e957796caae","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.6db58716.0.tgz","fileCount":16,"unpackedSize":77069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2V6CRA9TVsSAnZWagAAzDAQAJSmZSA1r0cNDuaCpXp1\nACETr+/aoQ58n/S/NBAFTFIzjvN4+SGdmASqVOMvAjTmejbHp5FDVy8HwF0x\na2w8ioWlyIWn7DRevx5KRticswp/uYDQ8UOe+VZyeiHeBcMzioEO8eeJPyZv\n4nE5Q+czQXySamqH/gb3Llet4cQnUZu6CjwgkAo6QfVsxiz3thRW2AjrJxFi\nRja67YDyn18sRWbLSPHNptP5dl6JyorKQ4rcDUNPZtGA3VU9PKlyomQuqgCq\nal6CGOIALFX0HprHnu2J4DYh8xmSgfbBIWqCyO0SiICY2sEW3bhb9SQdHBJ4\nKVKrZ5kex4HD9TM1Z/bEvIAyMctdcipNbppwmUuQbCe0tNOgwPMWstB9Ei7d\nnplKeZhygHfmGOwA7HeroWWwtSEwUscKRzBLJMsQFtoYSFqD8Sy/osbqoUpy\n9hMNzM9WuPkkEQrZT4osMJCzcCsl6dHjMWlSV18phpsnoztCCQE8W0o11zT+\nyQSgwhNHQb+3TTED8gihLUYnjYxTE7n+8Xp37dhBliRZzqyjWOl7cukVhdAY\n5/Boa9LE5nv0E4EBO1TmthaENotG+1gG6XMHSf10j2fkoj0OR56E3HUh+ZMa\ndMRoli84CpAo8z0iCfmLeS8Hrw4rgVAjIrL1Yhubwua5z/5/eQertqBX1bbS\nAkHA\r\n=SeAU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEoVYFrKgfaqsjOaysIaIzFjfEe0DBZaJU+yn52wlUt/AiEA4qUMdb3eKs0thtZ2Zkx9hYv/6NPx2IJnLzBLAy2oekE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.6db58716.0_1629709690512_0.2296505030532099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.9fb5bc35.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.9fb5bc35.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/fab":"=13.0.0-canary.7da413ed8.0","@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-icon":"0.23.0-canary.9fb5bc35.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/rtl":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0","@material/tokens":"=13.0.0-canary.7da413ed8.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZXhGxXlo30e9bkdb96dccYaQcoN8fyfCZoMBLGtd0omtGKfTagoEucw1sZ80xSlhA+DrLN1/Qjd4FZYCyJcf6Q==","shasum":"0be1c66916cf4c807abeebbea6e5c35bd628557e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.9fb5bc35.0.tgz","fileCount":16,"unpackedSize":77069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYwCRA9TVsSAnZWagAAp4AP/3joNUqpkOvDC/K6mE9j\n2UJmDB2qZJ/b+EpZfJMhS5iJD6n59jUj0g3KNmOUJ8pI46n5ceXP9ZwxxXfw\n0nbkSn8Nj+AL7qyUBWUSkLD/jQtLJ6JwRp8ZRjLUUR+vbk4y2xm0Yt4oHohl\n7QG2aKe9qJK0q519jhKRjCMaRhB1WxdaCMVqJjUXDUcJA3BcvUFVLmoLWleO\n06hRJlc3+wO8P6vu9WJFnvOJdzmScTzpCmVoOVqFi4aUvCwhYHZwhXST66Sg\n+fLSYwbZSWKojLuNTZ4gZOTGk+ON4bfu8emnfCp/EQtzWQ2y8iqNy+8nO/Tz\nksQy6kqpAtJK6XZZ44f6QNI2RLqFVNj5imYiCviyAu6Riii1MJLc34msYvsk\nmZVeuE7F5bYrWx1bBZge+eqyV3WCqNzze98lKsm3JwPjTQjtgc6sYOuLoH5/\nbKmu5eV8OKhNJU4FnrN/tUYG/e7ESZjkonZvRT6zvSg1EzPCv8PIR1AnRdOL\nMyw+Ef6w9sZplWsTpr/vsv3HldFT6m190qM/sDSjkANLRkf2/eSksTBRiTVe\nah1fu5kQjUR+ltuk6b0BtGiQv76X9F/dWfli/1eNgO/XBBjRA6mk2M2iDQRB\nyaKQZjfD4uBH4nShZC3kFAeLjjh/TOAR1G1NVzZllBOkD5feqtE9KGj40xcO\nQ6ZB\r\n=S3gV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgMsrcTKr63RLcqa0HeeXwZkMY2Er46hVP8EFrC3MxNgIhAMSNi38pm4JWqcb70nwjKawNQapTWzVOVonI+QeBlt20"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.9fb5bc35.0_1629759024273_0.09178986454119542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.ddaa5d8e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.ddaa5d8e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-icon":"0.23.0-canary.ddaa5d8e.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sf6euT8kt7592fdWKAGF8WdscQyqgfBJ6GRcOASw0kQ/DNBxKrNKWG2G1iYRDINDduYTCJH9qlWJ/DSywYorRA==","shasum":"93a9a2ab0cfc71c57b940276c62f44c0f8fb2647","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":16,"unpackedSize":77069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9aCRA9TVsSAnZWagAAt5wP/A2bjsBCPzoz5jwaES9P\nCbBgnDp6bARhtG4dhpIrWXPpzRCARY06CRzwt6UskNVOMrgifJxb+rIqvb1u\nc5epi1tcC9Tf6rEwozk0JCtl1JcpqGYjThJvFaUaV8f8JM7AFaMiYUxueKyl\n0zrgq7S99ZpM2b3K3OI+vUsdj1GrvTQvDntb+ZPBFRGYqsRhqyJxA8STviWq\nW52UFx0NV3tRUBjPPnU8TxvSyitUZUPHZAe+INf8lR6ABAaf78qzj97y3Be2\nzSFVi0H2Aq1EdbOs+qrKPU3bIN3n9iKukMt2WQh0iwJ8RUIj4tBbjxA2zgJL\nrqHoLIQ9y9uWSDJ6vE2HW68uetA9k/uYcTp2EH1KNSFGMXUFEBa8KHejF95P\n21/UoPedQ/9ridzpN+PZ5sQYWVSeSOb7kc7pox72QS9PeO0bshP8r70/5D7u\ne1eFpHOWfmHGOMtmGw0QfztmCH5tHuSHCSsG9YWdfj1hUbmV1379h4OldNqp\n0tz9CdtspBQw0WPjeGlEuwrTj45GwUyndAF4SZEfaLui+/I54Hs2IEVpbQgD\nYPTAhqGjnXR66cspK+1SrU7pX5LIB63wT43HXjxAGrtzWIY7Xf6XSuA3fHwI\nKaSwyPj+alnAslxF7Pjrh+aKK6iZGgFBCea0wtPY0PNnV6Iz+AgnEq67ygzN\nqYXD\r\n=dL5S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEW5RwmF7CeFQa1kwSB3OQZRV/m8B8tJ5YjQb2amGY0VAiB3vZ2/0mOyWXFUaLEFCOo1XctsAinRaSGUDT0ajJyRwQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.ddaa5d8e.0_1629831002043_0.3547551483106737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.756208fb.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.756208fb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-icon":"0.23.0-canary.756208fb.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WfRIGUEQus7qYbwGOmggK1/zRuOJqtt3yxAEqupN1VO72uPbRxFhiKzkDkDt3F0x6tteXXObTBUkK4r3DUA4uA==","shasum":"102a7eae09f1df6e779fdb8f5e1034a474e7be86","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.756208fb.0.tgz","fileCount":16,"unpackedSize":77069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8YCRA9TVsSAnZWagAANGoP/1ALE4mLMuP05edI/c5C\nnzipBKXuowwpsEIruIPKX8+16X4rSe/HuJO4npzuDx5pL3uzCrEgJ9kVgZQN\nXS08WA4pKtU8pBQYr1EZguaSFKWIOmy+Q8y01S773WdDaHwEaV0stZQIbXz2\niNO8pa89tzKiAapC0P+tAWlPc5cBUWPKxwHp5B/0M411/v6R9PyaVB7oGzvs\nIiNGXB0K18vl17Ce2yZin/iy3l9hKQ76MVnvYb6ckkfbRA4I1ykduQFr0EZ8\nLePr/2ATDGvUF2vdxQpqggnsVgayB1g+M/fIwLzGkm3q5TuZHV2K9KlbIIuD\ntyzhtpC4HybkjsTl5Q/4yaOwad0jf0qMYTQ78adBunoSOMMk8F7a5CJ0cCW9\nr2b8OGR7AVnAoT7Y6vD7bt5n1cleZM6zh5eUGsAc2kpBNulBMUiCb0kWCRd+\n9iyKEltcVQ6Ut+EuXaXRt7u0UKyzYrC89ky32HJOCLKo7LRRLWa4LxGaFUll\nDHET0MoVzGHCD7H77ywGKUzCWncyYqfMEzzbRbfWWRCj/XUxT9cU8lv+FnUR\nPmc75ybqeFxYhcjy9hQlDUhkup1yeLTcvzKh0CCkpQdKpOwDs+hTgItG0rKI\nd7sZAv2Kn8csXKnyoGYGkMOVl37Okjot3R3E7ZIXMz2QZ42pawliAA4Clw7o\nJo6O\r\n=9Ha0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIARgHecRVz10+/cCRHsJoyNhveYJZgrXNnx5b7h2owrIAiBo8V2XF9WYHLvdL2VZpmxZ4YQGxZXR7OHoefqVuLWyaw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.756208fb.0_1629921048320_0.8548147833959596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.9576dcd9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.9576dcd9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-icon":"0.23.0-canary.9576dcd9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jsp1w+mDA7EMzezAh/LbOJp3k8v6GbsMI3BdZyN9rLQn4eJIBQO99DdOnvgYN+OLtB0Ork5B+gzdR/AGAVpDzg==","shasum":"656a0c9094884dbeb9dd8c346cde7f90e1fd0d4d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.9576dcd9.0.tgz","fileCount":17,"unpackedSize":78562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmnCRA9TVsSAnZWagAATL4P/3wpLUbPrchehHq5cw1u\nSjwOkJTXOxUsMVPW88EJ5ksMXiEzK5v/Ys809j9kUu4mTmc1GtbXmIJ+Izqi\nE4vXKerpFCFQSgMhvyVotBNSmSf8/eu+UMgqjmCEKyu8RSc+3N1CrXEVihwh\njo2Rou+JoS+YV9ppJeCUQrI/fWrhx0jig81TmQxzLJCEnWPKfnXnRsdgT/Pq\nCWnb0mk3JcJzoSNGP/L5lXNx8apM7luNRNs//7tkBPbJGfMraqvpRL0eVjhR\nCozKjg1avASgLkVFDfO3aFsjdN1v6Vx0DXjjB2DkDWgzKIhyGwwBC31CKhbH\n8WqUwwsI4fc9OQ+x0eB62yscOd7phx7X09+9sW31XkULGLnQKrhLYL0YdaYf\n8nYEy9SgcRqKStVmDdJQ6oQBAOrJxgzztRAO/7HmQTl/ExpSd0EctP/JVnO+\nklT+AXuzwmH0xXMo38JqQXHUniZtUTN073+YWFcllg1JpEeCg6wee/YRupeS\nvTlwtqUDO6PBTRiPlAV6KWlJNJ7hiV1Z7VbebXI51cCj2DDmhnmxmHIa8wf+\nmAFmBfrRRrPwE1ZsyyboWEu4r1OC5fvvsyMRzqhHdoJ4Ug9Msy4zaMs2lJzA\n6J8azjjgnDk0jeFe/QxUajGaGDSDmc8el4WkNeKpkhM50Pa2BAhcKaFUL0Zg\nfZEd\r\n=/sm7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHxGILTbceLOkbQ6OdgL50Td/YQ7h7OhWRRVi7tqSeMLAiEA4KHP7JZ+cYIJ52kZkTuM0/iBYfCVJnIU6/vknS/+heA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.9576dcd9.0_1629927846904_0.9335664047457901"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.7531cf97.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.7531cf97.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-icon":"0.23.0-canary.7531cf97.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YWkWmaHg5+Gd+5yhTGnIEVLV7ArcfSgx0ISW2KzShF/WLjV1109MI34IqZ86eSXIJpnwxxEUQLCQnp4UQN3t0A==","shasum":"f6a238702e21e7b9abb7128417a7e1c56fea0736","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.7531cf97.0.tgz","fileCount":17,"unpackedSize":78562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ869CRA9TVsSAnZWagAAX8cQAJGRSTWPOc48hI5nJUiA\n8zXKTy1WG/KINLGXaNBqTOTAfsiOZxGR5SCGoVjj+x/+KdTn5miMXtTF6eJO\nvTF9SRUeUq6iktfprYuGNXEm8CitIRmQrlqPCBSJb52+A2cvVb3nM9r5irVY\nbvlGEuL+z8CeXceQL7NiAtZESAeJrgeWbg6SB563WYcTzyi+HWi3YzfKwh2n\nxfaW4K9/NrHxzvukaZuafzzp6rSzi4Ru2Q/PS3uK0EJiNEys/1n3EMq2ZDT+\nrqkBtKq9NYux4xT60h0JU7+vpZay14Efy4rGorwg2MQjVZUmYxU34KHX/MLo\n74a0aMpJVY4157bGOSJkKAWHWH0L8xEKt0ZuA/8oJi99/7lj3Y2q4MYZ6mln\nAfKASh6DKq5adSeHjN6ofpI1T1W9Qe9rSDsglIHLpjNCdyYTVU4QY80xokqV\nMbKhjC6xl0/vRiHwJma1OktaHXRbGBCGPGiBsYmIAu3pzxkKGIaTUpog3iji\n+Fdh2+iHZd7uphVICW16sjLVlc7jsm6/ad39l/U6frsd1/fiD3QT6joeVh89\ngLU01vEqkurwdNaC+/PbzCZNzP5wJpnDbSqu4J/ycNqWkSBLq9L3bxP8nsAx\nqPyPGd1bpQAitbX+WmSthMWOZZehJID6zbkYEz492eBJ4moBnCq6i2n4MQdm\n6B8+\r\n=WTN7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEm9Ed0yS0L4UdVN22XYu/zODfbi6xEO1MF6rZCoyhEqAiEAnmEjFj48WozpPyIHcW8124aipLK9tTK71y8MlUJBs1U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.7531cf97.0_1629998781189_0.6493184880517542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.3bab26b4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.3bab26b4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-icon":"0.23.0-canary.3bab26b4.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gixLWXsoHMRJzOWAhrbthSDa18ufsA8sy4Qk4ZvqW8/BKfUthMmdWbr1UnGNGhq3qQys5Mmedk0MTvoqPUodOQ==","shasum":"f12375b0566a9b9dedd549b2451678f0ea5eb7c8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.3bab26b4.0.tgz","fileCount":17,"unpackedSize":78562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtcCRA9TVsSAnZWagAANcEP/3VNtMT0+wTuaUU+N907\nKpf52Z5Znm59hMGwHTGKmqQxyf8NUAR3oN4ErFQnUdo0j0R9WAwbUbkOQSRB\n2UE+vWOvwzZbho0giVkGoLaPh3d67JL813FVok0N3AVoQnpWgv57eHEcNOa4\nWrXpSGz4Xx5lR8caLhqDDmHpZdKN5p/WzYgxbQFkiJ8zLmZ2d6dahhZkKCVQ\nYerqllwWDHds9qRrrzdIpdGeveyL4GHCx16LtinOjP7p8hmpgyC7HW1ArBOk\n56wjlL58rMAJ/h03sfjT+IhgcIsf2MFxtMwl6NTOaQWbGr/CJLRr9KQf2Wb9\n8HRjAhKv24bQMtF3MYsh04PzGHDaUCGmP24IeW1G+0u497O1S0WUYmWvkghp\n4+2m8/XdIXXEw2RNgbcH7MAer0JIorScezwHkScooDfaFDM4Ogmst3eruQWF\nYhrMKcRL+ZyVrZhVqoKLUqxIF11NNJWPnzpcnfz3qHP4H374pRZM+uvPbWDV\ntHRBLcbUguldU5ldUYaqejlln/j60y+SGr52F+f9Nnfdj5TGYMojA64g4KBr\n3BkdwAYQDxrgcLQrfrvGXbQzGjRNm0skkGUCXlv2eTbxahfE7pQz6c7mYaFO\nGZ0Q5kHMnD5G5wo157flrMu6dA6NH3yPDtI/mqvmQVl0DEg2KWOMEa4LSkHF\nlElE\r\n=BBGf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAhhNi23+qQqkbxaX2ssRnRTpv3rWajZYaFauWxyqy2AiBfCDMz91FenxwaSmvn6RZ+vYX1V0aE3ueAZGgQoUlxgg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.3bab26b4.0_1630014300361_0.22667627485920128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.fab48bee.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.fab48bee.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-icon":"0.23.0-canary.fab48bee.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KzlkXEYRi37jXWeC/Ca1WQtM7mDtZ3+1kFcind/pdVuz6LAXDjaNIAy5Dlsm8HYNyqDK9NGQdqrF+KlmcmXAhg==","shasum":"11307c17f1a633a78b3c36bbe6819d2f73b60c78","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.fab48bee.0.tgz","fileCount":17,"unpackedSize":78562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBC2CRA9TVsSAnZWagAAOHoP/20XN6lKJp91K3vF3jUn\nhQlPBEplIBMRvWEYB4E+4/fp8NVvn9GDLk+q8ugoJstM09T+xOn4xnBhVWS3\nJmSr2DRTn0F6e5Bzq/rTP1R0ZuDKsWaXOnNVEp9Q5pF0Iqxnjt7o1MELcK8u\nK05bPd50GvAi3l3UxtyxIIMmPhBFYk8BmSIKVkhLXoDx4CgjnAJnopG8VpkN\n9DjFOma9tjH7RcfLcm3oSWf5JY2kSMiH1VPLPNOkNzZRnrbcLUJlDEF0FLTF\n4G8fcT2T9OJ1nfvmyuyLYeq7xaEVGP0xPAN08ml8f4GvCkujg3PF/smoGFsL\nZ0uwCOtFa4D+2WM9r/LC1DrUUaTX9C9QFnyJb3cKwbt2SAjnldVZ8sCf/2M/\nAUNJuJiOlmqYlkGOb3eNEY4hstt1F4HkWGcGMBu6L/bCzDAw+eBIsslrZpso\ng/fGRxk7h089B6bPXOU/v1yEwpyBiN34Z0248Z6WewXRDFE1c9MBzuKifolG\nx4WIwhJp1Qv+/OtTgNbXikhDrbSZ0KHG6kAkiK6iP9NpXj93jSnvfNtx4QKt\niasjcsjM5oovgm/+ZckrqYIgaa7y8QOSmzbtZW+Gzi8a1FxxPpxlv8qqad74\nwXb+H61XHO71Cs9yFur+6JtHBBJ0OctDQDYW4NVXS4LdKR+xAVv1fGgXyNSX\n57gk\r\n=Fe8O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCM7aPzZcSGbDDqYEXCBC1g+qMezWToX57nWQkLtUPCHwIhAIdkYN77Ekd3pvStcv8a8ZKoA6PTKoXkSwh5sq9aAS5C"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.fab48bee.0_1630015670810_0.3734932772804842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.dec18df7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.dec18df7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-icon":"0.23.0-canary.dec18df7.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uXKENb1BbmGcbIzoUkunIiM6/Hmi9RV//aC10dlIRn84StDcvmMEpYPeOqBr1LnrmURCVM8DNW8HoDaQ7HFN2A==","shasum":"16ebf91d34483ad1050282ae901e3657ab5aa641","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.dec18df7.0.tgz","fileCount":17,"unpackedSize":78562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbSCRA9TVsSAnZWagAAO4YP/jcHOODHuvxmH2lSZ7MQ\ng2uLRlwaVsOBmvXC1Dojh5FZEdCOYI/3GHY5mmp2kmu0we0OcJj1Rskf2674\n96uomsHMKOXI2CiNFQPq43nojgGgQfkUd0OpbF/hIrgY85fi8AQMOlt2Xmmk\nSJTMiSejEO6BOgNDPPIHqD4Pn1vy4QXEwM4sQpnuBOUGBEiHUo8S2YUUbLYP\nedAHo10ueAVLPsQ7AxmnR3k/5YQ+rFscCg5GawuO+nfOoQ5Cp6GyLnWXvb7O\nQgQ+232xiQ42qICB7U5ErDOmiVnP/88HFvAhzwuzZMUiGndSatg1dpd/dnxw\nAkQprXH4ky2yoZiGeChMAZ90OfL2C+sYy0D6GrkDb382jcH30dta+3lCSU6X\nTpe4RFEIDu2QpZ0FEWJdHKQ2AKZZSQXVvxyFxjQFhicfJGnuCPmf88yu6dz5\nLnMNXjbO46hukM82qQ175NCZ0Il6NhJqTL1gvcEKApTtkgyI2hT2RGZ+mi1o\n7dhGJCBSYyO6OBvdW9uCQiOI0WUOB3mR7fgz8Cjwbi2310jFLnMSa5yu5A4r\nMPE7vTB0WUxE2y+MMBaKLBUBaRbaBxV1x09hSY99pukBgylXFnonoOLddURs\nWi88dNmDzRt44I7AezHvh5CuG8uuAaitDUEcLfqzVF3K8xmUNs4/A0kiG5Ka\n0HCW\r\n=ylvJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPku6CpInCyVMd/0IFo0p1NyBEQrHuCgYU9NxegBGagAiEA0bSKwTbLprJt9FiqiKneSBrcFOj9IxoX+lJauSzYm4c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.dec18df7.0_1630312145873_0.41285063193337823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.61fe5b17.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.61fe5b17.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-icon":"0.23.0-canary.61fe5b17.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XFHp7gSrrrCuurUsStQ4dmdWJ3tRftGLB8/h+tUeazgjSu27Ajo+8LqZuX/Bq/R0Hz8xlEPhBpFb2lFt+fTeVg==","shasum":"2e59d840301023f50891874c484ee25d203f2c35","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.61fe5b17.0.tgz","fileCount":17,"unpackedSize":78562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTF1CRA9TVsSAnZWagAAYroP/iWpD5uweNaOVAPlhbBF\nApnm3/byRLOS3tn73uyubs5/LnB+1ZAbL5mWT9uagprggskPfv3PJxUBlU55\nhlozx1pWBmJI/MwqdK2oEYEBwg/9xREjkHFxhXhC5vVsqvfTN74lo39mkG1N\nh4ITRxzQQ3HqO4ug27A2J17tJZTRgVtMc5nLuFycxrbHRCzMYsJtV8sCaKJ0\nNckiXXSnLFTXB094tkmMHOyxEyQIEOv6sQJd1Luv+eCwaXchD8ocSGB58s26\nlLj8yM4VY8CJo+Z620i7LD8QsRL0GVv+m2twG0nHGe4/ZYiqQx8VSh1om89S\nFy7Vmv/uMF8d+azS/YyJE33MQeoZ/D3WIfo0cAnZnv0rBjX58CJ/hTle9Zf+\nHoxy5+uUBx2s7J8P3kA0Wu2dfGlmXvo9nKIkvG9l/kMMhGCse7zN9eAp3C7k\nYgmImJNrx7a0DLRG+9bkNOHYgSdwmmpS5YdDxmZYZgf2aWGc11pTm3PyF3yb\nuKl2buKSm61v6lNQNxMHPWZQP4KtvjdWYRDEQIbMEfE0maeXoNxHz3dYcBFG\n9Ija3XCTNUOHkCJC/srU7fRGgECBBbB+qzJwEa2FjeaoH5z2lQSfBx1Fh3Vz\n8hldF5MqEVs2XYYCstAktOpdE/RbFzINru8gxTPkwW4celNXOwmPTS6dTS/b\nmV9e\r\n=kHYO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCK807MT2oVCSoVAyQqylGuA9gRoqd+T8TQ1WkJ+tfUlwIgWDp7EWCXsF3kZ41HIqj/XO5HwW9utSEtFI6tpB6PeIE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.61fe5b17.0_1630351732997_0.8499860776174515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.a8c31f54.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.a8c31f54.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-icon":"0.23.0-canary.a8c31f54.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ka0Xh1Fn2M+HOXbaenHu/3XbwXk6owVFxHry9vRmwDc6yAcnxAUS6isCAyCXPJ71lMiOeEoKeZOb7Pqej4tZLw==","shasum":"2739090a8f2c751ae3560d2462fe6f27358a9eba","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.a8c31f54.0.tgz","fileCount":17,"unpackedSize":78562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAtCRA9TVsSAnZWagAAGgcQAIjacaOxmUhaYr1Wzk01\nTSK5WTKXKes2JlNt6AO7UpyBomaKNHrRRSPqhbvdsLiMK/Ub1aZOpqVuWNeV\n65VavyLUs96pM2DSdSrZ8dlhEmdfqlqUI0Lstx8WfNc0XCsXdeUKYEmIqYiz\njBgeq5yU5Mui2kTBdhH9iomcW1E0uzQWhVT6JSvMYc5uQVWUnKhCC846Ke3o\ncc/iA4pSjeVraDylk84amDTESOC/luvmcmzK/2B6ilWjl4funXtu8YrW3xN4\nwR2BOx8UnjfkpVf+d4F+XNss+V3QiLv88EC1eLZj7AklALVYKQkZKDWJtQkp\nl7iLJk9bK8MCV8dReOOu9PsteVm0WVq/fkC/WmmOzYB+ycYauo7RvPgiNq+6\nD6VQcku9WQ3pHrJW4OwvhJsaAMduRQUvIKlu3iUN3H9G3ev3oT6i60S8ZUBA\nwrL9VYvF/S8jjnX3qmqi2hCsgQcwme4KaWYu12tmTsdpnan7hK85x66dB8Hi\nqQHVS5zx5jb6+UR3K/b89NfhPh8K4I1MMwlIr0v6KMUZ0d63yOJlrvYg3TLZ\n23CL8hPu9SLSExgX7Xy5bDX1a15eaiOme4x7VZTLlxfI3h7VSLRpPxkFbJRn\nibqDPwVczCrQWhnHW0y2hJJp6dc1+51Os0erG+0jWnRoTPpEC5Q9lEDbQw60\nFqIm\r\n=OPPN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBwy4PYCejQMnuOcx4lXap/Chi8G1uaprE5hYOP9h9jQIgU5JdOI42CnyeHUuG8iaRr9dR7BWEIgFyIKpzGpsj6g4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.a8c31f54.0_1630355500807_0.5782005003106159"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.a096dba8.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.a096dba8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-icon":"0.23.0-canary.a096dba8.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JfdwORnLCYxcKG8Latf9LJZ1rMS9ULf2ChepPl14UEiw/YPKnPhohD78y7DhBbksMxMOb9llXyYSQbqtz98DcQ==","shasum":"b598d3d8df94124bdc1b9f9fff80050d0660ad91","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.a096dba8.0.tgz","fileCount":17,"unpackedSize":78562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqraCRA9TVsSAnZWagAAuuAQAJt61OU/XwE3h4p92fj6\nQblWIN0DEGI1NhmdDUlHdRB46vfUE182OyLRzxu5R8dSVfQYU7sLLarSKBar\n4vqS0V7T1fLD4LwNhmL9pf2vvTedQnj0aQPGuA7nr9Po5UDyU5zgSpxC1QyZ\nlG3Q4GCjdFc61HoxJe7qTbyLQGT49iROIUIYSZDRy/0XjNoLuLMGCen067cq\n1BUGX4lxxRepItVgboKko49dRVbl9lKnPw1ZEG1J/+4/qRU6Vo7nbNIshtzn\nbtjBAFxBCpmjH+egYG3Ys2qT5C1TQn+CKD5gyjm5Dtr5AmTyfAZrYqsSG1HN\ncys0Tw7z1uT2xP3/kI7DHdtTFt0cCQ6o8p3+eb2LQPa0v0RLTarOCn1VrS9X\n1cEzBqtyU22dDcprmgIq791V/f7S/r40qIDTstxmTjOfpXd4CdV7jfRi3HkD\nfHZ6cNnXDTNSfC13mJgU8/yUIQBNEEMWSqUj7NMlE4oEGrX1AlHUGTwlhdNN\n/IcOvlbFVbLa/B4kRWBHY7tF2khhafcJ8PFAbNiWQ44d4glw6ivU1knC9B7I\nC87/m/8EVbpeZ9DtRgpljct7Z5PRhwaD3qHrYMgGm5vBZ7ol7Hmbss1PaZqP\nTnFTQm47etpAbS/JHQ5hvMpmnIJNLoIsOBy2x2Re/iLcI/F5lDqHXbUCxSTW\nbs20\r\n=3Tks\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCG52PhrR+uKXcpk1vzKwyFazZhcX7PUjKe3R+MsPcB7gIgTAMzb5KtXZGnjlRvhSWRL/iIo78pXFDnClN433Z2QAQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.a096dba8.0_1630448346447_0.9113763436209907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.7ec04d47.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.7ec04d47.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-icon":"0.23.0-canary.7ec04d47.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CxaGBaiTt1zn90U4DjWvZrcfAvmJp+w1CPvk4oewexNojnvzG8uAhNGwyTkT0pGi4jRVgB2HzDU0x2r9Id0yuQ==","shasum":"7cbd9bd3975227096e3f2670ed3d4d0b141f2eaa","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.7ec04d47.0.tgz","fileCount":18,"unpackedSize":79867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1xCRA9TVsSAnZWagAA4d4P+gKbST8LEzGH/YSAnNz6\nIJTtzBVWl+ssGab29WiX2qoSTYpV3gU9KFPImszMJz3v8tY6wVoW39jM5Iqi\nKK9UAVVOId/bmVu0uF3lX7JAojvuITEcLuN7oPWFq1UfdAHeiiOWtoLFv6Rd\nZSmIWllpqo+BbogQyOjp0TL3x7I+mzRCWs9As/i/blSKMQDxRz6jI74d1GVX\nGEOEwv7xuj7kDuGc2zWlXRTBaJw9j5WUUCEM+e0HaZZJHU/8I5Vncoj3F3Vw\nozHtm5MoFD5HKrEzui+EV5GOtNrMW6XSYiEJmwKFfqRin1DuUYbNHVlwNi9G\nlxgmAgYrRqzR20tP3oIYQmnJwnGVjQjSBD28MUAkFZHQjAFV3gIX38okRsL6\nJ7OFRoghqlx1/l4/Vi0DoJMGNpJ4fr/BFtiJ028ph+uNnuxYgAF8ZwFdpKLk\nuc9DijMmL7ZVWXFPn9jC2pPAngqWBqTtfelGH8+A8C20jmsTygCzIMBbusak\nVSLcTxsqYYSmFEAzTXxCzKoCT74oNfRSXD8HCsRx7tS/fqxP0+p/iXhmOXwy\nnaMfIWTi6/gSt/IVcgXD/Ybxi0OWZASQjeVHwJwPkV3W6qChjHJQ4l5rZDKC\n8jra/tqkQNRMG240frDsJOX1ijsdXwdYZjL+wJK9cq1tCokHz/QLF8AeTgCU\nAL/G\r\n=ShXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEp1aRTkh+8OrNUSrZctgrfdQ/OZsDV5QflY9tuAYgs9AiAgcVCmNd2+YQYM3XdqmtIk7VV98tZmwtJZUsyGAqCS6g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.7ec04d47.0_1630625137362_0.35589878341077275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.d00b098d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.d00b098d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-icon":"0.23.0-canary.d00b098d.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1NWALqj9Ez2GBbNT1O21TI3zj5F6BLV13ooQ+UAIxF9StzXWJxWc/QnIVK7sO67CmgynKt+pxYCIVT6CMvCrtQ==","shasum":"90649847a244db7ebbd2bd65fd2ee5160ea5f772","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.d00b098d.0.tgz","fileCount":18,"unpackedSize":79867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMaCRA9TVsSAnZWagAAAu0P/13gwLKai5qkGTmNdFWF\nw9hennzBFNxNFFYvBCZPDqQt8pzQUoF1cO1euj8wexGdQ0mNOv9Eq2j6jPB5\nNOptz5ZMbmBck20VMxpDJ683qadg+Z9ojbgUMhShDV48Ztgf31Pa2oR6q6Z9\n53xhFvodZsc4QG+PD1CCE8tqPudjg9/v+NN3pAuPw1eMlv7YnHKt319gyZmM\nS3kuzgT9xOmdOGCHSCAIyxyJ5pOzkyJUkiXfBqmJBJNgXuWY5JUWCRSSlRan\nUNdczmZsyFzo2/xJB9F8wkLjhsAOL1fUR4EU2XQZxzHiJJ8rmVev303OB97x\n0VX88oxOeFJmFdD2qcvSC4nsO516B84YdqzsOtbPsSvUSjX+maAXvWCeavyQ\nxEZKiZpl4DxD/a6wX/eAbarkL21efrMNoIjcHZInW3l0BHOW8zVGK0wCAPMA\n9++2qSv45B5noofw3dYV6r+nYzdLBFqDfXO4V/qc8MO3Gg5z+UZQn11VsO8u\nRLnDk0EyAZn0DWLq8M28QkkqpbhtnGgb7+ZWb0FfDtupBfELbEijftsBUSxi\npDIC333Nqllf6c89Hm16U8cyoEgeiFvHYoOBrx0ftBUBknD+GhKia2e3Bomh\nH28O8Zwuz92rRO+d7mi+L6LfJV3GvwaYJrsYqX4Q+VNkG/Pbdiml8TyuAxtv\nWex0\r\n=4ZLM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFM+xdlDZgcrbxnBMAIgvoYyluc/NNRJGdNVXiwKhTjBAiEAi8RgyA8ErKxr6uHfOob2GTp6hxenTE8aZBnehuRtuTY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.d00b098d.0_1630704410806_0.3895367265827192"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.f29b3352.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.f29b3352.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-icon":"0.23.0-canary.f29b3352.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MqRsPXnGD1F8zMHfDxP8NQscYH/gGEDk0EckKNOCmwDfQCLzrDLlIUcsSWa5JThAjt2KwLQcpJ7EB/fYbwVrxA==","shasum":"9e82e3aa16c201517e79b86f543dc106693c96df","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.f29b3352.0.tgz","fileCount":18,"unpackedSize":79867,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xyCRA9TVsSAnZWagAAZ/cP/0wu0W8A7qDPREO+vzcS\n3MGvHtkGJ96fSoMjTVNbZeKniNYPd+AKnreQ9GrObyDwJo11h+sx+eKTKGp3\nljWLQ5h0t9W4Dwwv86DMOqRd0ypHSeF+dvOXBWirQNvm8VKhLEmh9/yJA1uR\nqoyV8iD3KzxJoeoeyQ7v0JONHAGneXB7Mb+84vcDXnKkNZH4/2PLlBt665AS\ntZi4NTv3tQT8zZgqobLm51eBfLjo8cSMXbv635s2PEog9UdPt9Hg/S0gULZ2\nW1Ubl+bV5ernNyVDvNVCUtbJ7iNnvBx6Ro/nKeiqxpWTyxvHlf1PwNXkrvAB\ni0raSMV46zKVDv2r2bQTEUu/gfmbDRZ+LOl2IpyChFpvVEzsQ8/WW0USLMQF\noKKXv2YEogmVEDWIAOZrzuM3/YHDkXhl4go40EpgaUMjlUQ2OsUrMp3/xY7E\nBKWoDUYEOpxfpqIHQCafx2n/B+mSnOyHgEH6ZTqm+ypxM7OXS1UGW+v+8JSZ\ng2X2nRMoANYhlRJ22BNKajIED+4EkCfuvMviN3bjwIz/ke/rQrIwEky7Ckfh\nTnmU881pQ7F3KNqC1b0Li/xYv5Ls+2p3OZ8+bU9JGPGAuhlgC3HW587QgXni\n8td8TyoF0XcO7oNn4c/9KWUMB9nvTiSbObEM8AfycyD9Ds224MEMPJJTcuIZ\nFmKk\r\n=eyZC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmrsB4QFVRvFpiSpZUsJyGuOX6w6qqjM+skowh1udHOAiEAnNSmWM8ts5uBO7xF7yrzAkrYnN1RuzctHzyFQzg9KmM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.f29b3352.0_1631038578676_0.7212525595833705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.4962a163.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.4962a163.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-icon":"0.23.0-canary.4962a163.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tq82u4F6er6jncMwuQZdB56uqLsHo4BJtr8f8rkln9s6Xi96MU90BFpVv/zSgRzKYyHxgvN8EDUUh9N76y7o+g==","shasum":"0c5fa646ab64ee9b7452e6190fe59dd1ef90dc63","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.4962a163.0.tgz","fileCount":18,"unpackedSize":80983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/t6CRA9TVsSAnZWagAA3vwP+QB4tNBFa+DYy3m2wYJ5\nlDlvkwZKlB4x3/8h+dMegiuo9A4yFwNxH/LhViuGKCIJhH8aYeJYrlRXoi6u\nsuHFZUYrf8skbihQKxXJi5LGFwD9BB37BimpOLDQzh5Nj/5EGnBzDhK/4BsU\nBO4ZVo3iMmE6uEzOH44GCOcuE3ueqm6LKm2j++pL8sMcp1EQQjGV+UP9kzbc\n5hkLVQTUbbTSK4QbNelT5LSj1c56Oa//xyZgWXpqGab2MM9zQFjMNTtZmfmI\nVr0YwFt/zudR7MpKPKn9pkr7skLlf31BPmlIa4rNAhGJPPF9vpcdqhFK6W/X\nhRyDOD9TjmLAbr1irTlDveqCPUkaFeue1WxBBL/8F6AXUCntm68zssE/r9Ja\nzY0rBDwfmEmegf6y37cX5uaj8IKJO4vd1+8zqeYIi4jn0t4xbTciFSf8bmbi\n0DMGDbeuw46vxezjxM9qJhnLoG0TrokyGsbhq2IzxdIu5MDokkSatXt26az9\npRo/ZV9tj8ICOupe9a1p1r2lpG6rq5Qpq/jSIWR2WxM26zWyCKwPQ/Ua74/l\n7RPY0+TPnFTJQ1LGeqJjtIs2sBoYBRtvdBptRxNBsXUg++dqlB1phW5ht1OU\nypQnCo461AhRLKML24F4+pKVMhPOL6C2WlF0gxWqFmFNuJ0A0X5a26Ikm4AY\nMUyK\r\n=NRN+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeyjkstW2qNfdlbOy+l+3QtX2y/oJpZPyOyfrbGtL6jAiAalUwI4VHHfApLvf3X2O0lpj/NqNbZMYuiFNNIrW676Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.4962a163.0_1631058810427_0.5479503161824169"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.33102bf4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.33102bf4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/fab":"=13.0.0-canary.15981e9d9.0","@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-icon":"0.23.0-canary.33102bf4.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/rtl":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0","@material/tokens":"=13.0.0-canary.15981e9d9.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1ArFuhe1mNeM5Qvi2xRNTCAm0jpEN6gabZODH0/l1Bg0QCZe3l6kQfb2x6R/7qtTH1HPfql0jgEkCtiFyaWLlQ==","shasum":"2cd493151aaabf15a2c84b720e6c6da0e1475057","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.33102bf4.0.tgz","fileCount":18,"unpackedSize":81233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAA4CRA9TVsSAnZWagAAi6IP/RjgW2yP9FZPvJ6OR/k1\n+4IIk1KDUOoPVpM4dQMiD6aQSBlq9k2pqAnQ5MQP0KIogDVRhOo92EBvJirA\nG8DeBqU83KfvENjkn4MYZ5og2+sEsUGzqJafhWp1wMlq2Iz8oAecFeYfuT/B\nMz0b/t2QQDCA3oBt7osyN6mGWXUEQ292nrz6RzOAImp2mw0IOesBpCCwxbyT\nu0h94U2Sv0i6ufTKhwJ/zkefcBBp6inBkYDMMaaStATGgas4EGLiFtjl6mWq\n12KeTNHqEFFx/1TzOdmoPKWB0zu6FUE73fXmi9YnyR9HEXxr4hyWRxfFtp6K\nvrahoFSc0oZzYA4BEmMGdVSundb1hXH/JH2cvW5cxJttizsWYPWuOcI3tWSB\nFkXUNRGRnZaq7yAq9aJIQpvrlsYR/9yAPzsi/+lyQlBXs705PgtbK9ady7IY\nAGvOtT4/jh1kjXBaRRxWabmOP312HuxUqqXQG2TnD5b65OZnZ14GJDFQawNN\nsg1MoHyfFj6SjJzaWunKa26KQd4BOkCQuHlCWEWUT8AMhsPbAKiSsh9gF9LT\nfhNVcPKh3/3EU2dRF5QZFcxUJPklwK3RbxVtbNHw+Kmeh6bJ2o1Jjy+rbx7s\nsC+yBGkzLJXw78Kb60RS/DY56SHAHsS7v5q/AOZrzn4wmqVy/88DF4y+bTue\nrm6U\r\n=f6KJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrFXP5LaWqBvGnv6IkRyLznzjli3h/No5+RMtnrgzbsAiEAtye79tzl2ObiCtdg5jK04ZG4W61m5mTHWzcXdZRK3yQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.33102bf4.0_1631060024326_0.4039229486749325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.76c68381.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.76c68381.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.72464476c.0","@material/elevation":"=13.0.0-canary.72464476c.0","@material/fab":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-icon":"0.23.0-canary.76c68381.0","@material/ripple":"=13.0.0-canary.72464476c.0","@material/rtl":"=13.0.0-canary.72464476c.0","@material/shape":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","@material/tokens":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w4hLS7g+dlYxQrugO9S9MmWxVB8WU97bRpT7m6aOWP/e0fFthyPGHVNwYj9E+mQE9nt+yR6BV63Ow72HIofyAw==","shasum":"c937932af6815890a1c9408db579eb52efa239fd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.76c68381.0.tgz","fileCount":18,"unpackedSize":81233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmCCRA9TVsSAnZWagAAwLYQAICeXn4WALhst/diqKGo\nWT9aD2n4Hs/Qz4HlJuXnRscdrqS/fmQXlMVeiPrCtHTIopBOzJkcNIL6AQxH\nr4uOuZUbTOmEVMQnyI3NboTTIC/yZqQ844xYvr19ygL94Wz2Mrjr2af7YrH0\nRPhVZdyJ9hNhehZoBKwFZVqs8yJeqC34QhOicRxv4M61PzJgQvU6Ooxc+Pgq\n71WW1Sd3QM5p+mJdmk6iaQNS/QLbAuG7vukAOhAYG5ikfIfLouMd44fDKxgJ\neVDihXk1yDezFP7U3ZGn192xU5rbL1svTixvrk0B7IfmH5anYJFYogxD7gEo\nBW2+wXWya68nO0wTI35QsG42QpyQLLj9IZzOFdRud2b3s3+1nH2exOJqeAm6\nyeYB90x9pIaHvckLpqUakdCn0ehTs5kGXYmbO2CfArzxUUu1nRAMkZV6N5Wz\nfE+mIMRIc0is742/A2rEXSKxXIUjkjM3+1KDc6yFChdU4GU+c3poWr90Hv+4\nH65vTtTLyqsdAYy/JHULD4QQl3f3JxfyBSWow9uJPOtUhLBWPqW/ot4NFWu7\nlp/JKCOfS8k9CsIndomgHK6mj6iANRPhiorBLG3XfGLblZ1B9vCu8FPd1Gio\nn0jH2bANqTBucZNVZmv7pgOTQz6+Te+i21MKZtqOJPcj4qJHf/Qsh/kssh7c\nBvwO\r\n=RGCK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJx4Ef0Jj2PqlcDyGEFSKDz06BFsTW5JdHS87+z8a4YAiEAtSo2GWOWU4CFmgsZxwPC+uT/a+bCUzRWLoVhKFBgDiI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.76c68381.0_1631132034305_0.842030677537827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.17d51f76.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.17d51f76.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.72464476c.0","@material/elevation":"=13.0.0-canary.72464476c.0","@material/fab":"=13.0.0-canary.72464476c.0","@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-icon":"0.23.0-canary.17d51f76.0","@material/ripple":"=13.0.0-canary.72464476c.0","@material/rtl":"=13.0.0-canary.72464476c.0","@material/shape":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0","@material/tokens":"=13.0.0-canary.72464476c.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HCe2LM+Fn9Boe51x4a9CqypyGI3nCEiRBbL2WJAlMTcT9KMc2T3N82JOmFvoTxMijy975TLGGeOO9v1vg9fxRA==","shasum":"c32707eb78ce48c08e2425feee14dd6a7623083f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.17d51f76.0.tgz","fileCount":18,"unpackedSize":81233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUakCRA9TVsSAnZWagAAbaAP/i+EZgM3x86ET9KvjVBg\nYb0Ki5uZKyZt6mcB3xtfZAWQHH/I/f7suTlyvoxSx78xDlSi5PJslJFiVqv7\nNwftvkeAxuiKU4ltCQxQ5XqVRprjQQcjHYSOTdezQqGCbw6wz75dKWgFqUXb\nvTcrKtn4BvjGSoOyCG/5zLefoXNpRf+2gK46MSXhQZsADzUw5ecnYwzjH+H6\nmSoSkRe5q24Rz8pRIBavXpfa6pWCGUnD/y3JyB0kdUEYHhrfVT48tvCOUaqp\nnCQ3FP84omPjvwZheDmuBa48b80dNR0CQMjIhMjslUaYJwVTueKAYyKcAmpj\n0H8JsrTINVQygpcNB4zOEWJxdPJ29n5tBL4q7Pw0fsgG4ClJ7yGPT7RiYjaP\n6TXpRTQyGn0vDTwok11K1mivBHfHIG6p2Wu53jXMLDBqdxgabBKi9BPXL6Qi\nJ+eEt3GWbbD4zFwbTmF+ozGV6A9qSxpjWKHgtk8/IfAv3n4rV6HrP2Pxstk5\nR2rxvN8eUnn0h/SMdIQm43pSVEt6qdtj4tNK68YNQ8AOxIlSzMVrhVxwVh4E\nRDSB9f1KU6Z6QVZ/WLmP3ttKmb28Wy6/lbhcBnSP5BJFJ+JQsI8cUOu0d4S9\n/KV+dXj/Q9CpBNBJPcHZXD18ZqZiz/sEotldh1ODlqskDWeT7vz0dohx+WyT\n6D+3\r\n=j7Xe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGq2RcfLVNnX5JweAYw04ecMr6JsVHAdRnX4lqB3SqLeAiBFR2Hwyzp4dgt+XmJQckggcLSQ0TkyjSCMCwtIqhjiNg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.17d51f76.0_1631143588606_0.46370425541267446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.3fae6c2d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.3fae6c2d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/fab":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-icon":"0.23.0-canary.3fae6c2d.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/tokens":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-t93YuDiVdJVpN1KyLVYGG8q8NNXtNqhsYcJV8J9C0+kJzU5M1EUAQJ3D8WIKKMTleQuLERXgygjo0tuMm6ijxg==","shasum":"2ddf6ac63dd7cb96e6fb064aec38c8a5306611f8","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.3fae6c2d.0.tgz","fileCount":18,"unpackedSize":81233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TgCRA9TVsSAnZWagAAnfEP/2fJUloeMW3sK1VaD6lb\nc2/q61A9H1GqCvLyLsSgP/HjF5mfnK5PvuxibnuRDnGG/ZhMulA5cn9tqxpP\nBiRAm1wLcjW465zC4VSR0W7y63/ch/Nt1CqPeBelEslYnr+uvKs70XiN0ePG\n7uMQpTc3U//IwAsooUm8/LeXbNQE5OcNgTf+PxFt1Zd7bJ5BrHENfMrsP9Qj\niWlmshPJ75kCh1xaz/wsLKVD7J3AsUD/D6m/9frtRZi/AU+l4fLLZdq0347X\nG+hJZj5+LzEtOgg1I0QQPT/NR7X9tXMR2XqC5yiQCVuHMV+slHqI/l+U4pJN\nn45okZ/N8LkhBTkIlHRrCgRoqpHG1QG57rk9VX6FgpUBGfsJ6UYEOzxPMzxF\n+hUl6kLXfOlnueB/fQt25ddYnXTLhpinliB8X63Ss0rGdlvuWb0PiDJ2puFi\nk6DGgn0cryBheeZGGXfRUNYQw7gp7rCnjBz6vup2W0DMP/l7EUKpbVSePJU4\nXimb+H5hs9kt4jj4a84pXb0UuPjYeRU9S67bEZBjml/SNPGDpz+AIGWEDqcE\ngB0Bw3ErlvfCC+E704tfnzpPrYLqCtd4HuGyNya5078sJNzxBAcNwt4EQqjN\nGC3mvXsq/Uvg5XCIL0hvP+eZPPLt9Z6NY01lxL4ZtFG8bx99Ga2xosMguLFZ\nAuIC\r\n=Fqqu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDavT0rU8espdSDKq5WNP+Yy0OzZqaIYHFbcdwFMMrHMQIhAOdsQ92OGGlOPGDqALXaqLYVP6m1i40Orh6Ax+Lrqcvd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.3fae6c2d.0_1631298784179_0.8627966703853001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.f1958c4b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.f1958c4b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/fab":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-icon":"0.23.0-canary.f1958c4b.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/tokens":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GxVgdv5lIZZIPfdJZHeXVRyDdab4HNWNEaTY30kaaaxFk+4gx9tXn9nK4fHxYiPGE/xg9PbmDPCn5V/z+ZOn2w==","shasum":"d17daeebb5ed936183d1be45bfe01dbaf8a6ba7c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.f1958c4b.0.tgz","fileCount":18,"unpackedSize":81233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6STCRA9TVsSAnZWagAANoMQAJ9wJvsdWX2WndCvPwt0\nx2SzmLQ+mDNWgPKCNswZE788T6hANP6Po09qc0B85Q758qTaj/ZnUPAq7fNy\nYI0TfIHkigRMno3inqyUdS0CYdEc03bVrW+edvDmikjvr5Yj1LEiDt/NR41+\neX9Bp7jm3jNrNkfXPy3XXPKvjJNNcrpibWfgbcxMdhSyNJPRaQggc8mO0mmj\nPLh0iftpBYFaKISqEWlpRtaVpfo+nGRkiXXsAI3c4cIGzIvmxbQdP24ec5Do\ndFbfqS0/Y1qq0EaXAnnkHTRMZCNWg5ZAAkEy5eGgLyjyFDKsgEFVwCV/zGo0\nJqhkE0CmPKFfd/Qla95zWUzfxsPGgdNiNwehWxMcArrxyb7yi5juu8K93doG\nCm+CX+7+5SCwCJwJdbFC6a27tKjHA+zUxt2Fn8iV5KVNAC29nVnSaXFPQBaS\n8Ue/aRLGW3N/5k1Cm+EX1cXcb0broUk+akuTgSvH/nBM1lzI7eM6pxJ8FsBm\nWnSl71gKaR4BJ9e8Sp53Xm1UfY6uXxKZuRzL3p3gDnDkGeedBcShAk1S/1XJ\n1tHjQixnyFrdlbu0flUr0WJSmloAj0cMvT5FzB+ZMbEd/mbSx9YKRCN+22aN\nLuLYnmrjrQw9B6r9mrQTof/mrzjgAW3bNRjh2l74b8yBsK422VrKS1qBq1Fy\nK5jo\r\n=RiDY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB+NRB3H+HrBTl3ZUfM+sOSYj7A72yxLsl5fLIOctLcfAiA71/Vo/JX18TAIavZcXuWTvHY3aa4teKDzPbnsvtCGog=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.f1958c4b.0_1631560851478_0.4582183859071607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-fab","version":"0.23.0-canary.78abbd59.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.23.0-canary.78abbd59.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/fab":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-icon":"0.23.0-canary.78abbd59.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/tokens":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XaCF1y7ak+pbI704TaOsNhmlIkIYllgL6apP0EQ2AUXXa78JoCFpPxXwqlY7YtruZgeBXGtvbt3+ikWk4eGkug==","shasum":"f9e23e5b1a7f133eb94464d25d795e4f4f49e0a7","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0-canary.78abbd59.0.tgz","fileCount":18,"unpackedSize":81233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8ICCRA9TVsSAnZWagAAg8UP/0mxon5BYejZy79jSG08\n/W/StLkC+m0Uu8VAWUCIeDnyOUQ6cWKe7GM/rS0OOGhQ+fRxEVjAVJ4LuCT0\nlpVp1FQdD2sl6jpfwnBNOMfc7MvV0Pfhp7azouHqfm8zpHvP2tW5gW1JBzOD\ng5biUbxDl5SgNwTyOCk5lFbY7TuY5iUJ6XPGAtBOiiSWEygCO5EXrMmboBX0\nNHk3qPbEdkQ1IHfi+WZJRLuCz7wp58IX4w7xMYQ39VKI6spwqJOyo6UEj/In\nLTDbI+NehTHhldYZ8ISH+8X+nIhm5o+x+nDEZVqrAwQ+s0wK5V5sjolRvO9I\nB09FNXIjFL+qG8FA/cXV5oWBGSIROfrCbDkYscOUl4i9qyFQziScHLlK5XEW\nPRoEw5gtYJWSpM51q6gGrRlZ12Oqa9oItrwPs3ovygxvAs77EuVRjjcYuaPO\nT1X1Cc50e5tNyKxPVxnM4R1Vp9YH0Tf9ky1DzTfjzw8EjrnkTm+h5jjIf0iZ\nYmqmS3scuyNDcZCK9fZP9eGk/xbnqo1cf7JdQe6oBx1nD8McHlF3kqErx9xE\nsWYjSUGk7htTWv4FOOG5RNjjF+3eGAHfYBjnUqBwAgyP/595jMAzEYjnzyb+\nFfCjKp44ocm+TpD0fZEmO7vxGDGdIGd4trfWFUvQBTiEt9N9+ga1JnJaxxVs\nYUWv\r\n=aqrf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCehNbpL0bDp34OGdiVaX+9goQ1+Xnn4//fJi0sH7z4twIgQ1DjaCNstoHIdTHoLx4B5cQDCw8kjc6g2LTFWKNUBI8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.23.0-canary.78abbd59.0_1631568386717_0.23856223445081604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-fab","version":"0.23.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.23.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/fab":"=13.0.0-canary.864798678.0","@material/mwc-base":"^0.23.0","@material/mwc-icon":"^0.23.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/tokens":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-Djy7uRfY1S2cl4UC0kptmG6Iy68Z/6w78wQMiQZHlUZKi5i2zIfJRMnkejf5PKg1FAGPKcFQlNoTE9q9UE4nOQ==","shasum":"090f495ab598d9d645dbb6ea35b300d63be1ac0c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.23.0.tgz","fileCount":21,"unpackedSize":106222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QzCRA9TVsSAnZWagAAn9wP/Az6NC90EjPA+rhWMoEW\nGPkTUNk+jY55jpW8jSt+kiBOUWpHQmmHj7iUX/lmmXbltOeo1GAWtifp6heC\nSrrN0O/5hJwtkurgq6zAGwfehGAEPWbZ/vjtg3dmq1tsg4ysjK+wueTm2uIv\nzuDlvZQKm7snxPHZRyprhQ2gdD0N11Fl8yb5XkgAYNqZ2TFSzUf/iFiQfWod\n2PFUPugEU0CBkW5TdoToIW3VbauC5LHuN0NaYYj9G56HrgqrwSL1+WN4TXgL\n+8LGl23KhlppFVUr8itj5i4Cpk2ZYToZUxTGOXVkvrQLLZbq2EI1DBnWbvQR\n6CRFPjMxMnmW54CBgMsevB6asvC5rzRzpnXmSkJThP5lK0JUgmUam+Xd5L1G\nGOUFFpDhy9BUWg/LsYsDPyKsrKLqWSOTSqBY4iEdzYEDrBaQPWiCjMKZABSt\nC+9lXk7CezzSKwN1xHhUQdlf58lEGylLl7ye+nEK0lJEjSB0DXVM0MegJSRX\nyqw6WJ5PoMj8u8aGJK9umMkiUyNZVvcmXu92So/QahPkd7WNaw4G8sd+Qrai\n6jav9XO9wbvLJ35+QbkASTvvuarC5gQnkLgVPZ2Syk1gEZO460sn7vpOydPA\n5OOw/BFBNuOBst3ELFcnsinQ4rM00VS0Tl7Zc/fnAcY9PjIILm2XVgkvS5nA\nxSAA\r\n=0gCw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrqZB6OF8uPdAzQRpxAoA3YBNc6Jj6qO5DaMZduHh6mAIgSbcu7ViQDvCzBJv7gzdZtkHoxERlJOKihJ8hlMX86bg="}]},"_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-fab_0.23.0_1631568946917_0.9321960647173773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.9830d665.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.24.0-canary.9830d665.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/fab":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-icon":"0.24.0-canary.9830d665.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/tokens":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nwRHobfIZeiVQUxSKl5ZAA2H4SOBujJ6Y94UuY2vKuAqpvZVdSkJDkB1gbl37Ix8y5GhjrG2EQ959ZTRS2zxfw==","shasum":"369cfb11665670ef5ee96e1c153d5b4c71661910","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.9830d665.0.tgz","fileCount":18,"unpackedSize":81233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SLCRA9TVsSAnZWagAA31EP+wVU/mAfAGX/Alel7OFI\n9DcxmBiz0xg0d71G5tizu9tLiW/969n34mzANiZ6iOCKKlGQ0VNKSjhcqafR\nkvQ5dIQNhsIZmYPW5sPlcqxhLfE0ygcWvAlr/VRgqDcXEyQftTyuaur26J+M\nAYA5+vOaVx0PfFYTv1UXWbZuPZc7OF7EKnOKR1z6nXJkq5Qavmd8Vlbg9yvB\nJeOOOSAp77xJ+gSWJMpdFqNNYrHCm9N6zcMwL5oMqkQqlh+7CdDIpXZ4xHDw\nyuElTX9P3qeT9zOdiDBUWf6kJG9gvE5N/XNwkQLQBKxSFK3/WJ8lGaRZEXBB\nfYQnr7EH15MaWz+e1hmKs0oKULwnwDJnrQjjQjujnqNcVuKYIoUjvBi88KfE\nAp0KuzsXuYVYjuO/uzOt5qqcveNBLI6oBWpS7e7n4SxMihAUQ1vw8mK8z+uF\nWrIa9MqGk3djG3FX7bsUMPpbiP8zzqiULGTjavgIHExZg8QIvN0LmtOugCDh\nYBEoAfmOAZ1Ci+H0YwRLFqeHpQzG2s2pkRG1MTaKssspjqnC+isHNLISuFmU\n4XxlovkwfKNST9HlXZsrz41Hif1g31gUWcBZTrQDAEJ/uZqP8eME/X+O2iDt\ntrMc8Tywv1ZuzO1dxTvbaol+Ludpc9HiD3usYc3ThWtjG1bX6Do+nY6r+CA3\nCIoe\r\n=ls0n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAfOIRd+dSov7ILyvt1sVYAGy4ABCgDHksIkrOuIHKZoAiBSOGl8eRCJBC0niHCXHldHY9O72KdPO31jvNMkmfE33g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.9830d665.0_1631569035011_0.4250402062416918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.20e2081c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/fab":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-icon":"0.24.0-canary.20e2081c.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/tokens":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-O7iiIFSsIsg6M4yFXorJE23IaMF3923u0if8rullx4oOuSK0KBVPTk30PihGKVhOSCjX0a16+C9nUfRx4RCAqg==","shasum":"05e6fef07fbfec978d9178aa1915b0ea50767730","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.20e2081c.0.tgz","fileCount":18,"unpackedSize":81241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+CCRA9TVsSAnZWagAA+coP/2nL66HpTM140q461IgD\naFy1pQF1oIEnPtwLV5rYScs0HuEPGVPmw7YLrjI1hD95Tiio22tbKujyWxId\ndxZ1h7T4VkuKZWJ6eb6S4t0JxtEFFvhipPD7BcNWJPYqCl4e+yiX5LxvW/Ay\nNXx+Kux7wkUCkYy6VngDTb1wZCWmvjwtcmCr/LQydomSmOtMCxJB7EovpQ9h\n3SEMrY17yPPnYWgrAQWJeaxOfnJz4Zts7d0mC9gfhePWsawxLI8m9K+OjRJZ\nBaO/JtJfc2xu9xr7CHBBuIyLb3eTfKRqZAq5nzS1EfyPQC89iKsdo043aBgB\npsyK1LGtEFpxrlp9Kx4bCzDaQw7jA6GWGdKnDmanUxTPSY8+MEG6nAgLE3Za\nPIQzIi2zqHx5S1MYdG4iuNMwOva37R1BAyspIN/V7nsgP/p0HNlc8WKREUGi\nxdV6/RBcnrnt9z6bGVhf35SmOWxDd0NDnuOzxM5KevCPiWg/0Ka0GIZe6QB1\nS0tDlPt2echpBsI/VewujIch8lV5/IDyKuxMLeimDiR2HqZdFuAL+YdU3or1\nKfrnQMFHP6CtGTkKeU3eoDkEpb7PyOlmOsu3a5IzXWmkCYfvkZB8H+wY/nBp\nQmkAHnXNi0I/9yOS0q+LemhFucCfWoPM8yDCiAUqLsLmSIL6KFTwA3nZaQLR\nkxb5\r\n=513+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDxM0aIexAtCab4wr0zGeCopN1OE8tZL2/rX1tywdJp3AiBQxSaDNRrBw1rBfoGo1pe/Q/OsATwGXPCBGKU78109cQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.20e2081c.0_1631575938297_0.3659028428694995"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.583613a9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/fab":"=13.0.0-canary.864798678.0","@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-icon":"0.24.0-canary.583613a9.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/rtl":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0","@material/tokens":"=13.0.0-canary.864798678.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Lg99N4AZf5wz0ENGmdI/Fs34J+mQlLK5/Wzh+suDxTlGL1VWcEVckbEnih5vfRmjKXuPZ1fi0MDcqplEYBUXjQ==","shasum":"874a083667142f0286e2b4cfe75ef90cff3d4305","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.583613a9.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNP9CRA9TVsSAnZWagAAiGIQAJkKezEb5KNQ6y5pfIr3\nMgHV0NJVHhS2FTkKd1Iz5/vIh8y+7iNrD3gVq7H9P4Ic5+cqu4HrcoLD7++H\nJImKTAaQtHc4jr/lUb+l/YGgxoacuwG3ToI3NFBVwqznUj/EIcRZMYjlxRWn\nWsgVz0wW1EBH1O8n79xNMFtQAOD65G3zc8h//rsPqKSgeL76yQm1/iCAecBv\noNofLGbBjXtK0eJLaFhtfLnEIliyhYX7JbaLMqzHDFXmgUx41vvR3lZKi3Qf\nml9f7ohNeUoEQtyzr5YjP1otCB5m3TS5nRb/TR5RK+hk/zCyef/JMKLtpyKJ\nAtOqlPdGjsnLTheCyP9l3dawuy1GRlRMFh2CHTk29kEbj3MUhl/Dth9W3V/t\nzYCLcU7IRECm1fOJ6kJ/MGwnlS+2jGH8aNXxp5VirVZAaCL+MP8p/uoUCkiP\n7fEGtiz5F74+j63VL6aiVtzuKeBGzx7z+nr1GefFhbXSRXoZasXkdl77pppE\n8o9TlAAyjy1C/BV2b2DMna26cS3gD+NGhMZXOV6SQXji1rUTae45mDZi0aAt\nHd7raOGvT1UFB95Nlbyf5koniSgOOxSY8GdrWH80mjLdBlAZfZ7awDmV8U8Q\nTeDJyKUEIGWVRG7ZHZdnWnABg7QdIQ3fnwVHpAKk1y6OfBp8WeHQIz/0rfuM\nunly\r\n=PcQq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJEakX2ikHy2tN8dmzctEk2GhA5dh2NQAqBI6cWL0L/QIhAOyAOBw1FrJo8EA5jc600Ez6+4Xa0MdiC6LATjFgwbD8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.583613a9.0_1631638525010_0.9531664286728685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.0e1bd56f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.08398f880.0","@material/elevation":"=13.0.0-canary.08398f880.0","@material/fab":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-icon":"0.24.0-canary.0e1bd56f.0","@material/ripple":"=13.0.0-canary.08398f880.0","@material/rtl":"=13.0.0-canary.08398f880.0","@material/shape":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","@material/tokens":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ca0Qa11/4StlIK/yLA1OlUjRicu5EXsFjmAla3js+6C9rrt7Y0B8tkpvO20S6wmpzXvQF57GNQFnQac8EHk03A==","shasum":"a4c43dd202126ba6d3829ab2ef673f0776862214","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.0e1bd56f.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNypCRA9TVsSAnZWagAArt8P/RRhpVmgZWziYHQx/bDN\nfJi+PwZucJBFPlslC/mTyHJf4Eoi4wvMm3m2+Ngd8sL37hLZxeAQ8K43t1Lo\nL1V9eQpetkykxk20N7OZQEE0cycjFTOCjLFiQp79/hG7scaViAuER0otEk87\n/k0vFMbArm+ZcpKw+XobkkLUbgNn+kTtsG+gE1YkXIjRZWl84E0WAGzFC2qv\nyWBG9FNZPWNQ2jV1fgVzWDbkCwzwG110tjuTtLy2Stq+17hHtl7Vz2etyEiY\nGz/s6/0WU9a1ZEeTxC0J3TkGd/L5c8BUISBSVGUm7gbRLUqwgetxKzF8Burm\ncGHyyimuPiBJcW453d2KcJpLXZSL9PgrzP1mrPcTDwOo1Kp2ITh9BHkpTro3\n9WjWksQ+t8NkLHMKyL5CutBjb1ZKZSh/SGQyt5TRMxokOcB2d0lBFx/QqWid\najJDcn37pHep+iAjTjxJpi5fPw6/4awNTFHzS205BvJ67iuVHUeRWKbobtAY\n2jXp5CViTbF0dF80ZMvzOMYzxl5vtplo2fzG1uqlcT+8Zi+sMFeY914tR0+b\nd6KE6Tlfp4T7Vl1vLZY/ypSeE9yK/m2+qVT+ObLUA0plcmznQcX8nU2BzkQq\nX6aJKgOKG5NU72o2NmbnVxuwB2HdTt5JaBFvAfKNkB5dK8FBPHOmfUUXG7ZE\ng57u\r\n=UDOH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCktpChmtZX/LIFClf5wx1bOZxeNMXZURilMFi1JkC4+QIgYSujpzGYIMWinexwZsBBrq2H0OJc3Qd3ixskVfhnA34="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.0e1bd56f.0_1631640745625_0.7641533800489815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.7bb1818e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.08398f880.0","@material/elevation":"=13.0.0-canary.08398f880.0","@material/fab":"=13.0.0-canary.08398f880.0","@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-icon":"0.24.0-canary.7bb1818e.0","@material/ripple":"=13.0.0-canary.08398f880.0","@material/rtl":"=13.0.0-canary.08398f880.0","@material/shape":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0","@material/tokens":"=13.0.0-canary.08398f880.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UMmibq+UIfq11TCoqj2LxkCdV01/cYXZzuoNLUUlL6GPde/ztKAUPLAP9d22VrTRX18MvSO5sQjsnc0cC9JAFw==","shasum":"2bb6dff947d305b0712c24eedd725ba0def2d191","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.7bb1818e.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/xCRA9TVsSAnZWagAAkpMQAI6zwY/6jwEhRS4zpTJs\nInEPHYYgQjZgYwzOhETqCQmcYKFY0Faj9lBDPOd49xEo01t7aJSytTZjCxky\nfVeyMtMs/efeAYmrS4oQj43SOLRKBCXZvcQskD8s+5T+FkEj5bz9JuNlgO2H\n+zDTedSm/8bTAvD9yUpQX5Iyqgs5JrFA0YvYeQzypHFYifeuFkVYxKojmfm9\n/kaQpLDcNqxkbdwmBP6tqiatChKdhwvC39bGT6AqAfq44Pwkeg8yAgMjPeGT\nJBa6FC2D4QyA124KSPVjBepkUmaNhYUx8W+De2FRq9vUPbbKBUKQ0WDK9iok\nuEsl3GmoNucwI4g8eybh9O7GJZVJPLAgOQUSHn2cck+DhrrCu/BOa9/MTXo3\nbZGVxhNm26RUKZqzV95PFIYt48mzmq9fC6REyhjek4hLf2MPrJ1Yi6H6fHW7\n2/nxQPWUwQ2XDZJbDfDAlSFIDc7iPKVcZ6XZo8orJkdEirSNLuJDNnqNNL7S\n6VXb6P/XD4JuBhgBkNEGR84oDGVetPz9OXjHu8363PT7GxJkciGIzGSKY3MU\n7hHdr/YgVL3Lox+KkRI/b6EExYGHCpyhv3sveZNBR8q8qytYIwHSj98dzr/R\nWZ72QoOSO/elgwQwF7pZaQgqbaExI44mXNIkHf9Ob8iVx55eFbKWoG3hi3/T\nMSj7\r\n=cN5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuhWJIELRglQjxdlGIclB5Pxd3HhcGRV79LkVToeYoOAiEAleyQ3JCnD7XxaFUnMwyG6AgHladglWughE1DkcgiibA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.7bb1818e.0_1631666160925_0.5544373797992919"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.b5e665a9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/fab":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-icon":"0.24.0-canary.b5e665a9.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/tokens":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RFi0eSeg5ePnIa46gHhzFhgVD6fW0p5hG5bOS+Kar8GDBHg2pF0RZ+DfOHJml7h1b5KwLeqWYVQVMfYm8AnoRg==","shasum":"a86090c570817990cd19123843e6962ae2d0d0bb","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.b5e665a9.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQje+CRA9TVsSAnZWagAAzTcP/jtsmhz7A3VLpwWI9MkW\nspV0fyQqGx+6zyXjUamP9gZx/UCK38XlCURYa/uW4J8wuY8Kas2BwY/RiJx9\n0hx6k4dsaK079PHk9Qq9HEPKbeu/z5SBciccK9ufq+rCUaQROgrFMr1n4yGc\nOhxJBk3hEd9fyFUTrXYEWFIJTl6JNneLBWo+oj1tY4SWfDEgAWWEeTYTdhVK\nuuerzXo5GYcgrZ0jSRI1Mg8n//OBA5Kxz9DtLvwDavhYf6be3rOEZ6plr2Xx\nmTWyzUxr3KtM8b7KRoFZ56ztYtxGdoGMtili5qHFIEn2TXDAVvLgs41SVi6z\nabBRjnRTyT0ckpfEzRtT9B/X0EEhvQMrmi0dAy7izkc/SJMoqp93hV/AR0iR\nEs4c2rbeJ7Znse8OVQxwVBEJ8zz0/xO6aIOcjs8N54Rju7iMiUoZB/8fC40b\nxGltv+rk/q+qe9wbmfYHXaKH8CwtES7XPSTt+2NWXvIqiDOSqdVzhlrFesvX\n5v31XPRJQuihujR28PQL/4bbtTvX7VBRmrYWX+9cXukT/LbzKGFdwksGQ5HV\n2FVr8+KdaGWppWjgZtWcat0D7dUcyIqUPby/vJSirnl2OzcL7ACP1TfD1q+B\nQeUMdXE1xOrHhRHsRD+zRJXXe/Ev2hwC9jQCa8WETdHvnn6jZ+Kp/ifMayE2\nDw8S\r\n=3tYL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIERbnda6JiWV21C927ErGZ6s7r+C1PPJc4N3T1f8V2WNAiEA9HmWswFEOcsdYr/SYxBbhJ9Mjxj2hsh0U7t65pAjnHY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.b5e665a9.0_1631729598710_0.686903095275414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.ab1e177c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/fab":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-icon":"0.24.0-canary.ab1e177c.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/tokens":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-72MoYykOKxqowMtWTI2zKL3l7eLYUMpH02TMl0VHlqBX98GT28hl8WHXFOJaRuKw8BPrrIOMOqT8ilc6vqW/ng==","shasum":"b931506c72bb42f9a263f478e385c6e27e6be606","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.ab1e177c.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8pCRA9TVsSAnZWagAAh2MP/0nuMXJua0QkYjyhciOG\nHOeQD6vRlHSy5o4mKnyYGkdWyVGSsKB38m9uZCLyGhmA/hriB5+lEtgvEzVl\nO/5mgy/jACg3UQR+svtRcooRHFFjkQN227GRCqKcXgkQyQQgxM8lPKlZI9O1\ncqiERZqcR18lB4Pg8jrnHOYDyPiLN7Ve3TQkCfta1kRUYGzGRpYtv5h0ffZb\nGzZFnvJIPsVVgiNoVRHVSPgm2afuvSsEkokjecSZQIguc6WHHPgfL2DcWGPs\nqnQuh+mvTyb1iY5Y40lhhIBcZb8MlKoApjZ0l4t3OgNr1iXSjOkhmyBTd/c4\nFsco8KpiNl78SlL5YLVNnwv3/elvXN5P144cJxwJPD7fFioBna71ySeSoNZW\nnhSQyS/JMXfy0AEVE9I077H9KvO5KxHehIP4J8a6bOweUeqTetvO5UPtLY7D\nHdVC3TokKM1v/8MQ10iRytW7o6h8BRmUtq0PQtTSbp4pi04xi9iWOSrdFVEr\ndbdHhcM7szdP7sX0cbT60HC+dmTwKTQdOuG8FcsMEdulYLVbAktDQsT3FN88\nmIvXBX3tN9ptjq6C1XfXEnuLV6mutQObf4wPTz0+gkSCU8ejYXrNuwdbUOjP\n95sRuHd07I65J32bP+6jKb5A0kamEnwUHUHSHnYZBJF7f4LduqWXvIv4+yVX\nSvM+\r\n=o4gl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE77YBw6cy2mbKyQcKLZpU4WThWH1bi2oT9SvByyeXh+AiEAy2Ia82WhzL0l9Jej1S2DaIgaUJmmMIvpDyEnWoxjDTc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.ab1e177c.0_1631731497135_0.23840854602862116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.8dff8894.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/fab":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-icon":"0.24.0-canary.8dff8894.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/tokens":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-spF7J/u3bJG5rwm50915U4HilcTwuKv1lW+UQvvg0Misf1rZDWqfuRNN2bM9q+QwC05NZ9PZzQeECmXHqqmCLg==","shasum":"d93e013de1157d84feb4b1b8010366f35ff3749d","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.8dff8894.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkS7CRA9TVsSAnZWagAAeawP/ihn5ddi4DH0PgbOJKA+\nnGiiBA/jJXbnQaKED7oOQa1dkvNRZ18YuDpq60STAH/LlTfW14Vs9gMOTs/v\n1UNEPXrcgumvoCodkPkxygtZuYxDENRvuFRQxDIyDn6+UOtETpzIeNVkAvmX\nDh6xqbEk+ms+KO+NR5ZxxfKAispRGDacluVYEo90ERVWVUp5f8A8WDaGlmpV\nL+arB53oYeNcvPwfl0qFFz+DM04hQNC3ORdT4fn2n7FmD5uBHEY/wUzQlLRt\nZfJmvM5Kj/j7+mmC/ZDDfiw+ZlE7YP5CshN5zDrG1jJyKJ6M7uaiuHj3fBSA\n6EQMUo4/Qf5rzGHbOz84T506EuzMLhfZhlafaXXzG+9GzlCISyZOw5ec/2RV\nv0yiseOOm0P0hIgwGru0AmXuC6stAidcQEl23f+6jMJSyYFc6qbygc/u1sCG\n70r5BQGgdVqG58g3zoEfqk29AyC+hofF4rSU+i0QT3E9GKzI8lVvMBJA7p//\n0VxEe2D1D9vrMANqDh7MbL1mbnhKwqtSeTEJN+uYi2/qjFp1YD9QErxibX2E\nnBZdVhF/m9+s4oWyKSiRm/QUBZYppdFgUtDDsNNvvgJh6KPQA/2zqK/EUCl2\nZYJ3SHjnL/L+ofc8yJjt3D5wXVn/utaA2rJJTsvyEQibU1aaNcYFMROnH20a\n8uZG\r\n=rWVH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO1rxEFbAyV/GS//bgNJrOIuG+awdVKKd0GtZ+VgUjrwIgezLVB0t1rfCvV1sqWlzXauwhIHr6WutTuSsi8GaeZGw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.8dff8894.0_1631732923148_0.4003440930046591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.9cd7e927.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/fab":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-icon":"0.24.0-canary.9cd7e927.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/tokens":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mcCJSEQ805d6u6AMW1+4lcqI5thBdZXiis8hKer7hPPPUNy9edFRLzqKKKjS3VY1+AErJY9uPy/AtB5Ino2YoA==","shasum":"afa753239498fe2d2ae2eb82ef6a9655bf2cd51b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.9cd7e927.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhWCRA9TVsSAnZWagAAJMMP/13SQ9qa457/uu3yXY6M\nhL5PhV2zp6jVjEFqCnr9b58V7F9O2tqIQIiqqd8dLwnEa+yY2WaibIQBbB0E\nXMIRakIiTjRQKBEbLcTT381IMLuGKIFhthSi0OAsAKQnbZQ5xtnDDqGAdzQI\nMNF4gBWHK+B8N4/+PgXR+EeS1QKgkH5maaWPUiigAutJIxDSryiwOwsHQ50I\nR6k6oxfyAE+xWs3dTOoCgRgMUmNxcQM0MayOP0kCwCT+Gd1+yKZ9imgpJjJO\ngPdj6UUvauHhh8TPBvScrtImrXEMiWpN26dhB1Wy9+DwEUR32MPJzxxRZIKa\nIIZnhmTXKGTpkwiGqHp4TvtK3oqwIY76kfF5U0vWC21OX8085ZNTsX8ZjgAe\n36oRjQOqMFAIU3urBCDyoDEzvT+jFg98CJOKDHYJHQr1TNt79TCwElSSzTNY\nfVDHVLc7w0v1kgO8Onq1psPTQCBjY2XkAewspx3vEef/xkZ8zsDz4w7Kdvrs\nTMuDGnAnSIim5OTw3LJ2sOetdb8kSam/uWaGV1VHUN1SwBRb4y1/tzuLWr3x\ngudSJbCr8/SMoS9P3MTZRy3CHEsSUyOPgV6+cPtJ9sxV8PCPHFTyWWZSSUYs\n7Ea1Osb5NGkbpLe2mi3NAiviNVLJBYFfvfZdCcYdiJfrXkd3LDCRJ4mCXMDE\nc48O\r\n=4jYo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDgvi20b7d1tRdFhUcA+AoOUNYUyMTfPs4valrm/JovAiAb5Zcjl7ExRha5PQ8LgW90BwI6XTAW0Vt7UidT2/NG9g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.9cd7e927.0_1631737941983_0.735063979242143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.a7132082.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/fab":"=13.0.0-canary.818f4ee93.0","@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-icon":"0.24.0-canary.a7132082.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/rtl":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0","@material/tokens":"=13.0.0-canary.818f4ee93.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-50+4tyAjirKPpg7Cvbizutr3zBwslceW8dF9Ym0CUYAzi6AGepNPnz00fUkPCrpuPwhrVOWArVujwmAEXYVytw==","shasum":"fcdab1ac2fdd57830b59a95fa7e112de858ac305","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.a7132082.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmOCRA9TVsSAnZWagAAkggP/2y/5MARMfWYLkqklV8O\ne50sms5aA/FJ9mnHtRCuL3qt2sHxoHamFx7Ycu3+tSP66kR1NQY9EJ6Iiuwq\nDn1CqfFQ+FdEx6IK5y/vEhJ0GIEs0PfMDjJo0jFDXKBSzylb5bLS6yF2qPXS\nnEkqb5gSTlCvFfi6x+u/fGgIA3Ws0hDil9l2tB3ZiDFFjzfuvp2xWi3ScP/6\nqk/Pu+GCuHkSPwag+I3IGLiFS6UJrLhmonWbewpF/C+xgA/4V3Sa5F8ru6X0\nTlXrXHTXAMvV4BiceDvuZQhDcUbtzE9z91iufNySNnORwX7pWAu5VG1kb2H3\nKH9z90MKF5H1NLGrEw9GsET0qrFfnk62kT8ffr1TnxE7mkskQuDlz4eVlwaw\nOQcADCAR4pVLqt1gT4bXv7NZbWh7pKet0E4HnD31UZnj3DPJq80NzOsBQjQv\namlGLQVxpWCmynzmaQkS+WOcz+4OfAaB6fdUAY0Tbh+ftDiOKCLqbaZd381r\nEhfl5hWP6Mvmzpm7azf5uv00K9R+HyKejDhnJ2HFnyZUg4MTEVAqz62I/yry\nBYfdwMsuppw+5H073rSk9XgoTXwYMsvUywyNUJInii732n+kxM96nQXQQoSO\nysgKe7hMGSGZjhgOMFY558QwCFqNQOnsYIRb+StQtpXs9bui5lmA5uZLznEQ\nHKNU\r\n=fenF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnLeOyTCuEMr78cKMjMMwmxoGPr7fumiFd5RaCMK+qvwIhAIFR60OhBT+ajdmtJjx0XWHKgznlothDetmlo9cbsAgD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.a7132082.0_1631742350403_0.37067123842355754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.cd9110cd.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.d4e16a6c4.0","@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/fab":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-icon":"0.24.0-canary.cd9110cd.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0","@material/shape":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","@material/tokens":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-i246oeOmdREBS7rrA/sis63RhwAQkTKeSzFzTV7dDjK7eFwYxsJ9GBqEujpQY5cJ+o0iLb9jOhsp+VylcVwegw==","shasum":"6da62631adb337d052a891e9b7201bd67ac6f403","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.cd9110cd.0.tgz","fileCount":18,"unpackedSize":81247,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LHCRA9TVsSAnZWagAAa2sP/AtGD46ZJBX4IZ+F7QEw\nX3+8s/NrIl+9FvoUtOf4au5Mpa1vkMG4XMa4bYNV77nY24veG4mE2Sh2MWFR\nzsgS5cUQ/Gz/1RbqDyYcj8wfLBrtNa3OmWkfOI9BD3Qjgf7Uhx018pcdPCGm\nfcr0oBYan5EgMUUswb94MIwQYvq9URTilJ+LVSlhASXbgMC/By7Uvb8yHrgJ\nWmo+ZM4NYMi8pcBx4V1vh7S5uksZT3SdqxAK2yOIdh1NDWLhEo2DW5QDBIfo\nVnZM2DFuGBrwP0AZBoZnIvPxZMlbPGvTIHvGJg2ZJx/trSiVGDJLUSjPjR+n\nIPFuD6dMSE2gQQruqxg0ZSFP2OFKiL/+MFT/Ck0Y/JxBRRWnfyBW6HDWc54u\n6NYwBhCckW8cAReM+GC4tp0qzMe2vKqFjwO/NC9/IV8sFbUFy/QKmyST/NND\nh5AwYAvJn9KlFXhSsWcIe921iDWK5wmRMdUAcHjJu2bzJM18x7r4znc2upj/\nO22jc0yP2VMlKxYBDeIJInqs0BVbARTjwPqJF/QjYYEUJf3V4QCCqptU+NKm\nmbLchCUz+T+ijVPzUbEWRavwOInAiFumroKwmO9XocCe0hijHP8ZxybYxjFM\naXMePojx+bnfWVW4esrMxojt2k/NkLCo2+bNZq9Uv3sqo4dDpVf5U7N9RICv\nLy6D\r\n=CMQS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDU/vnVDOtTjgVlzFKjo4CTgnEnQhGeSZHY079/MgGK1AiBAzAaBmKlybE6Fvq6WINB/G1rm48oJ/woxFtR0ZDL0Ig=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.cd9110cd.0_1631814343486_0.9360429616409922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.1e5a9883.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.d4e16a6c4.0","@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/fab":"=13.0.0-canary.d4e16a6c4.0","@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-icon":"0.24.0-canary.1e5a9883.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","@material/rtl":"=13.0.0-canary.d4e16a6c4.0","@material/shape":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0","@material/tokens":"=13.0.0-canary.d4e16a6c4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-T5+hI9nbnyGnHucoNX/diDoVAnTPuxujfy2e6VLMWBMwUfQrMM4C/LZ1KZx6CvFs6hf84UELxY7gr+TCBvY2Hw==","shasum":"f5a1d100b270502e68273ffb5c4a2d6ff6ff2f60","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.1e5a9883.0.tgz","fileCount":18,"unpackedSize":81247,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdBcKgCAC3KhwDYfxii68VroOwBq4LsnwzpZ6X/fimdAiBBxsdwV713QzmOzQk7mg9/s8fhanc3RPoU4FPGE/7ZDQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.1e5a9883.0_1631911151501_0.5045139367457978"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.32c830ee.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-icon":"0.24.0-canary.32c830ee.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-/QvvxylumdzqRNvjqXsl2AoWi9cJoScY+m7I8DcIyTifuLRBp3LQjRhv7ameO729pKhRlgaOpGALyQnS/UF0dQ==","shasum":"0108d8416583591f01a288c1725a3633380a9abe","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.32c830ee.0.tgz","fileCount":18,"unpackedSize":81247,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDm8ePVBJ3o/9DPhqAt9JiaELmBYurFL/KetAY9sn2MfAiAt2AYnCioDCfzc8m1dPw396ivcxSgf1a/gDum3PiQEHg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.32c830ee.0_1631920130379_0.9143683211670297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.1de87bb7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-icon":"0.24.0-canary.1de87bb7.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-dJWmWTp8H77XeBXZ7+tqY0rgpWXHpdC1onpK6NirkrqQB+JAUD6UEF2p33ncxvMVLiNA+EjwANFtehlUAf76IQ==","shasum":"245d0dc07ab2acf2f7e0b2cc44d9f060aa97e0e1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.1de87bb7.0.tgz","fileCount":18,"unpackedSize":81247,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCo9hYRm2zJeRrWk1Gn8qSLjTKKa7ZXpYq85Q4jDyyd7wIhAO7EYyHkuE43XY5xjsr9FIPHpq477h7oX0gVMHX4+n3O"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.1de87bb7.0_1631991133529_0.6502256633720931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.f2ea80c4.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-icon":"0.24.0-canary.f2ea80c4.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-7xoo2yLRXSU9GLMZuaLctY0Ffk+uBcBoq6PjSnQ9bJ1J7v/gUBF86ccbhH5dVlzt5j0nugTZtBKwWVBQDScm6Q==","shasum":"7ce9c96e7516252072d091e0c9d6e90e76888dd2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.f2ea80c4.0.tgz","fileCount":18,"unpackedSize":81247,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGRdsgU2V1BsTRfEQX0eqluEydBfPXMfVEMJyCTeIj4wIhAI43nxI4IkBQnNO7yS4355kyrwimS2nurf7CXQhRlBOz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.f2ea80c4.0_1632160498901_0.3396800125744577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.569d739f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@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"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-icon":"0.24.0-canary.569d739f.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-A0EVgIuYRZJMoTxIsPTtbV//6rt3np2tHKptg7hLgjJAA8RxWmUfyMeIg8el7jztM22E2xdHWaLFOqfL8ahwQg==","shasum":"ec3affa0cc0945f112d75f760c6d2ba59796c991","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.569d739f.0.tgz","fileCount":18,"unpackedSize":81247,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/oejB56PVzBZHGyO/M70MqRKdpSNCegWWc3tBlffezAIhANEzsQH1Ko8PvxUtmaQrHElyEo/kmZLzFloKazkeiaAv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.569d739f.0_1632173033595_0.7896390040382966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-fab","version":"0.24.0-canary.5a434a50.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.24.0-canary.5a434a50.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-icon":"0.24.0-canary.5a434a50.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-WKAts73pg/z8FlGDaN+Bc+yJeD8reXR5MvZnQ0bEauOvb7PdzvDA3eO2sHM8A8vogmLWdDVhDTRandN/5yu7EQ==","shasum":"c82886de298d5d8ad7a7a3673585321b0c727cfa","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.24.0-canary.5a434a50.0.tgz","fileCount":18,"unpackedSize":81239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnoiVGubZUcVY+6yw+64ZwUaqixdshz+cNivu/tY5FQAiAqZSxOPrWdPGB6rJK1GnwqNw6XgcRVAbXl5Hj/1VS6PQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.24.0-canary.5a434a50.0_1632189649905_0.39126654701734154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-fab","version":"0.25.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.25.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.0","@material/mwc-icon":"^0.25.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-tpTR5MmYIHzeh8UUrfN1McUycvtbh2pRkjAJm9jEUvfSCRABl+wEZ2dLbTd5wpE3mFyCgTVbfKhYhbMNgnh8Wg==","shasum":"f6c14f0b7443e093c58ab572f5df1c2ee6d40e96","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.25.0.tgz","fileCount":21,"unpackedSize":106228,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp0+KdDFx65IO5IfCoZQjGykfM5m2KXGlztygF7KN3gAIgQTbP3H3d71XttFth8bc5IDviAUjtUV0qSJ/5ymXtg4M="}]},"_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-fab_0.25.0_1632192785871_0.7863133875917663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.b1c1ab52.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.b1c1ab52.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-icon":"0.26.0-canary.b1c1ab52.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-jRaQU9/PKVgPjIZ8QTpfvvDD8AJXrFwT6JcHOH1Wxsdq5DdMEUGuVu7zhul/D1yhF+z7ngwSFFqHCNkzda5j3A==","shasum":"a066365d9bb93e4f448a7ef53e1c94bd7a620ac4","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.b1c1ab52.0.tgz","fileCount":18,"unpackedSize":81239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8UtIGSdlmmtVPycbxMF/dtk+W2slr8aju+PDDBD2XeAiEAvRYB11eocafjDkCxlZgz80SRTqb/+j4KQ+13UJVWfcc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.b1c1ab52.0_1632193934937_0.8482177444060361"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-fab","version":"0.25.1","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.25.1","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"^0.25.1","@material/mwc-icon":"^0.25.1","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-ns9yip9w+NNLJQVyQFlAxoJmNd6PnfoJkMwxS34YNoHWj4NLLWs97nZqNOjjQKgpyNysvowFgFg2ciI88xRabQ==","shasum":"cf0d15e400619367eb2d41813553955eabfbadf1","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.25.1.tgz","fileCount":21,"unpackedSize":106228,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU6NUQ4XMvqv+bdq+9u/HebF+MiI5Y3NZM7OqbUKQzBQIhAMeunyFuR5+FYkDY2zyydfRvvhus0iojcYZz5cPs09gv"}]},"_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-fab_0.25.1_1632193962558_0.9790885623023942"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.ae060177.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.ae060177.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-icon":"0.26.0-canary.ae060177.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-GPY+ztX6nGppe/szUQlxB2UWpbRAr6n+ItQkkSuQ4w0dhbFkW7os24iYOBWH2zze79ldoy+TSx1paxwyVoE6+Q==","shasum":"af475788712509c1ef99936739cf389abfd99836","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.ae060177.0.tgz","fileCount":18,"unpackedSize":81239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWkpbY8Qm7+lFyKb5U/58pCMLJofIXA/SW2Gb5MNh+RQIhAIEJ1imAsrm9jS0IdQdGbihOy3Y45Sle0/Tay829wCiu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.ae060177.0_1632235092512_0.7932777210502593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.b6fe2a12.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.b6fe2a12.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-icon":"0.26.0-canary.b6fe2a12.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Lgn33GEkl98WWCQwAgDn9c71fr3F+SjnymQTxZmYK078+xscZrChVjN7lLnTixXntgXl9MyJdRp6poWmJ7Tmyg==","shasum":"12868a251b1522d38252f2ae65192fa1556e5139","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.b6fe2a12.0.tgz","fileCount":18,"unpackedSize":81239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCthzWul9savlGOc6Nzhj0pxEBZxEz355D9+45j+GC2QIgW+qJGtq8HAS2hClKSNyrKqFdYHBCtIb4L8xALr4etJI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.b6fe2a12.0_1632341780971_0.09912979843237779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.07e91417.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.07e91417.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-icon":"0.26.0-canary.07e91417.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-2AxDU/3aLmaZ6+aN4D52+TsKsBo+RV4adjAYRnF6GqUae20B/SUw0doaWF8yNgcLBPRU/tKsWhagMyz8zchweQ==","shasum":"c677ffb38d91c794d4f797b19490e76960262496","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.07e91417.0.tgz","fileCount":18,"unpackedSize":81239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbLegmnDz+JxE5zfx9+dCsVNakYQYTU06ihD8xC0tdTAiA49qAmxIIUlaTq2hHiRQkpGfw3/bnQm6T0Nq4+6CwSSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.07e91417.0_1632344751767_0.672655580637487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.e2203ffa.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.e2203ffa.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/fab":"=13.0.0-canary.65125b3a6.0","@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-icon":"0.26.0-canary.e2203ffa.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/rtl":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0","@material/tokens":"=13.0.0-canary.65125b3a6.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-mnhrQ2l0Qe/sI7C92Wtu1lVbY3TtPspbqA0dn4rmX4qnLNDCQj3uQewtZ/PR5XPk4GLMjKzL4ZTQ74iXdoQ8ZQ==","shasum":"431278d028cfa9349862bffd71cf36400204f6b0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.e2203ffa.0.tgz","fileCount":18,"unpackedSize":81239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHXsTxLeWAyBRYV6XSkbCQDGKS39Wzq/qYwHkzPwkh/uAiEA4FkSssSasKZEUxAACx/WjGBGzaye89I/rKjHqeyNJ04="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.e2203ffa.0_1632421661590_0.10961856774061673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.4abe237e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.4abe237e.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/fab":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-icon":"0.26.0-canary.4abe237e.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/tokens":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-qcMZLIEOCcfzeH8AkyasF/4tki3wxdOUzsvtWRq8756aMduIYbmrvnffoEClYSZsij3c+5u3a1N0JsA0xXQ84A==","shasum":"3e21a75839e49cf4dfba2001b5dd91ef79ca6c20","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.4abe237e.0.tgz","fileCount":18,"unpackedSize":81239,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBobINGBboSd73GLjVWAC9SknGBNSJ3KhAA0ZCsAUwg9AiEAwya5zZlotnuUcINRitCbPQ3ku3nUIa8j7SzqsSmmm2A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.4abe237e.0_1632504672324_0.3166666340573705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.6278ee5d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.6278ee5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/fab":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-icon":"0.26.0-canary.6278ee5d.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/tokens":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-qKeqIMve4OhPGuYYGk59uUaXNP6oz4Zx2hM755ZbkZc2cdTt/xKzAQBEmMXI/DvME8QPPUM8U6+t4H8f2OF3+g==","shasum":"e47d55103b0d5ab0fdc1892405fa78a4247fc997","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.6278ee5d.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLC54Z4oqJAiO7BPSp7To01/10KKJhj/pqojrBdZoDswIhANEBZWYTSVcwIP5SJmW2Iv+KEaNQo4CpPVWDKXfFPYbL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.6278ee5d.0_1632767486481_0.7078590498284991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.3a5d5f34.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.3a5d5f34.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/fab":"=13.0.0-canary.c79aa0cdd.0","@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-icon":"0.26.0-canary.3a5d5f34.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/rtl":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0","@material/tokens":"=13.0.0-canary.c79aa0cdd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-iWVH71JvEdsbDcrCX0zQ5USz/nL9e6ILW765BXbhcGlShQQ4Vyzv9ZnX3seqyprOlU9YpNeVmEjwSjWuSljlvg==","shasum":"3967954a9634ae75948c8774bef8a1ff24751d47","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.3a5d5f34.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjVL3xTQLifZnxR2e6y7EK1E4MpazMrOuKCA661VuzZAiEAhuraDvPUD6WPPKB2SOG40K9q0S3QBDkvZIAKLYIkOJM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.3a5d5f34.0_1632782495469_0.3731885651498337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.143ed3c8.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.143ed3c8.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.86b50ef74.0","@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/fab":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-icon":"0.26.0-canary.143ed3c8.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","@material/rtl":"=14.0.0-canary.86b50ef74.0","@material/shape":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0","@material/tokens":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Qp7SEKaHWDGhWMpRR8EjtnvfaQbrXewicSZidF3OMNXv8f/jG5wd4kLlDd80dCfP+qnAsZ3qCZLNWdQtl/a8pw==","shasum":"0c9b1540fc13827fb2d923d55abb58a657cb4064","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.143ed3c8.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2FDmJcnP7SktD/XMmj/4aLetrrbvlAea9CeYexeY2XAIhAN1bYN3KZeczBA6yLsD1CLqBLLba805pMrkPuYzWddFk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.143ed3c8.0_1632880254415_0.9242299907213489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.e5923d68.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.e5923d68.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.86b50ef74.0","@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/fab":"=14.0.0-canary.86b50ef74.0","@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-icon":"0.26.0-canary.e5923d68.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","@material/rtl":"=14.0.0-canary.86b50ef74.0","@material/shape":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0","@material/tokens":"=14.0.0-canary.86b50ef74.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-rmyQ5CGRbOw1B+P5v10KwTy6ACyaLpgImHTBvvIxszEY2VJkJf7fIfDGn14E6upoyCXsFPEqMk8xYxm9HWSomQ==","shasum":"6fd785771403c5c86f1d09bcf93e51a85273238b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.e5923d68.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHgNoF9hrcIViWYh0LrvC3zQYsXi7+uJxgUxAQMEYE2/AiEAtqDTNx4ehNXWC4mYxmrRx3w3Hab3cqIbsUn48gdFyWw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.e5923d68.0_1632960353916_0.011180781049432875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.d8ed5109.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.d8ed5109.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/fab":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-icon":"0.26.0-canary.d8ed5109.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/tokens":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Kl0r9IJr8hTPzBYD0nldJ3Qt1ToUcbICrQc+NDn2F+9Urd2+ivdeHO9knK8tEObTsxjNiq0T65A3jMSsH5Ws0w==","shasum":"5fb842c4dc7ebaa5764d474b330d6910f1e67074","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.d8ed5109.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGAS3ZI9PQ5n8QbLMXjH5flzQWisk4g1s2YfZ2DdX7cqAiEAwDHWEnPTXcDenvJlh+Fnx1hF+s4JFuG8TAVl6MRg+cc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.d8ed5109.0_1633044837677_0.6543182892157873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.0efb9c2c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.0efb9c2c.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/fab":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-icon":"0.26.0-canary.0efb9c2c.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/tokens":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-AjyREkCT7UOcfp1VFCM2Ti192+fXs9GXJl3YJOh+It69C89GoAkUmvhVzbfWRiL3hl87kDrUbU8zLFTOnNm0Bg==","shasum":"350636665903a1caeb0482bce28c793b5638043c","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.0efb9c2c.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnWbPgVVsLYHK1p0mT2mBY699NhguEk6cq3pipRFRF8AiB86taKPeER8Wy5v/oN1aByD8YWiMD1cjjBesBRSHvk6A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.0efb9c2c.0_1633140500623_0.2914915966192446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.1c9adcb3.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.1c9adcb3.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/fab":"=14.0.0-canary.586e740dd.0","@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-icon":"0.26.0-canary.1c9adcb3.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/rtl":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0","@material/tokens":"=14.0.0-canary.586e740dd.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-CMSosaYxOda/USnn2qFGtNtsBrsZFbBSLPYtT/iCRBaecxq1ZKav5Ce09RKW9Ck1cEKb2zEYbvE1WQGtzAjjeQ==","shasum":"254fb321de8f76724e578f086548d705f54ac029","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.1c9adcb3.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGK3FO9Vcd+XHj7Fu4k3xsS939NYrnIND0whR8j58ZGlAiEA4Xti6lHejmmEcxObC+JmGx0Tt6aVOpMvo280cdIO1oo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.1c9adcb3.0_1633368817549_0.6269712338800071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.dfc00d60.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.dfc00d60.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/fab":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-icon":"0.26.0-canary.dfc00d60.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/tokens":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Xq7XyoU30LMUpbBRR0AbZNw5msPXYWtNPw9VHAaTZX3YHw5mvb6j6Fq1yAygnosNMC15pAsTX1RVU4ggH5V/AQ==","shasum":"cb7e3fdc9a512da4f714bbd6e20f9af96da29b99","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.dfc00d60.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7srPonrj/INNU1VMwi6QeRKr94U5VwUBm5ZBg6FDSwAIhAIspqojxAXBw9tYNrTWMQKGqyDJLaCZJrdskWCmkLMOQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.dfc00d60.0_1633741038956_0.1557994293855638"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.c3aa844c.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.c3aa844c.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/fab":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-icon":"0.26.0-canary.c3aa844c.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/tokens":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ad5vvsnRERjbQFb0lbow4vKumaCsDBq9hmN+ZbL90kMnhfXQ2IAj7QC1EiNGnAP3TLHuC+V91suBwCnaeiOlmA==","shasum":"f18ffcacf46ab35abee60f1dc8a2d4a37d09f6d5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.c3aa844c.0.tgz","fileCount":18,"unpackedSize":81281,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3bInoJk7w9urHsV72kgrJTzxCkrBm/UDr4rrBdm9/PAIgMrsbrJbUva5ZqmMbaUzdU2Qh8s244y/HGF6rY9v4eZw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.c3aa844c.0_1633994065255_0.47769035902164325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-fab","version":"0.25.2","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.25.2","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/fab":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"^0.25.2","@material/mwc-icon":"^0.25.2","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/tokens":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-dRBR91pyEvUr9kYgnPQwzRwVxx+qbA4OweG0xKljYXKMtQqc6MWUZhTEGkYTbiooIC7uhaZroceibqiobR3g4w==","shasum":"62ade42aed0832cb554527ccc0080db7361474bd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.25.2.tgz","fileCount":18,"unpackedSize":81212,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOm43zbOvFrq7enHByIVbHtOUrwjM0ovVrZZZ75ONDjwIgcONDjoLLUXYQzZ1AdTo4Gqukg28sNhKPNfTdRFy3e7U="}]},"_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-fab_0.25.2_1633994313384_0.01812736340212906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.406d6fe1.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.406d6fe1.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/fab":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-icon":"0.26.0-canary.406d6fe1.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/tokens":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Fg8WHJ2M/2ibb8CUtiTNBhxCqV5w1/Oiw/PfWFarY41wWA8+Ix3hGToSn2Lau1Tv3RDURGeAMeA+Dtfp0InUfg==","shasum":"5527e033fb06796229be2cc14d40ab8586b04c2f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.406d6fe1.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMk5EBPmh9n80xaBVDGl87gyR3hh4XHjM97GqkbISJvAiAiX0F2dVGjQ9vpU8pt/6uQgEiW7Hhvqbb6n9+B4sohnw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.406d6fe1.0_1634158772388_0.6324461178763301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.ca0a674f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.ca0a674f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/fab":"=14.0.0-canary.353ca7e9f.0","@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-icon":"0.26.0-canary.ca0a674f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/rtl":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0","@material/tokens":"=14.0.0-canary.353ca7e9f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-pt6tmMN5VhG8Bu8BkyMQ+qMBbg5YRz7aeCI0DA+pR4qSO5IiFmE8Jult7dlZo+hGL25xyPAjWrqGM1lh8uiyaw==","shasum":"32477a4a5a9cae9062fc0d7df0c4b8e939c71cbd","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.ca0a674f.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmxaV9OeVXMkLuL4tKhklE6gwzTlBQFyRol41tDrQm1AiB/tO7y+T59vwW7o9+E+cBa4YodkV8UOK94HSpLQJ5GUg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.ca0a674f.0_1634593023517_0.6058563537462518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.eefcf660.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.eefcf660.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/fab":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-icon":"0.26.0-canary.eefcf660.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/tokens":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-nTSFWUE62Vf+iufUqYBRQnZUyQWaOslW2h26fg7KSNFLYwHUEOCAp+wGL4062jXQDyoCu+BQ1BfFf2sjIka+Gw==","shasum":"88a9b3b7f372e2c8fde998f7d49db94d7224cf46","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.eefcf660.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEsZ9lha/kUEbIi+LzqEt3tmCUcj+Z46RQ5zC8WOwcIAiBpRYT7ps7S0Gr7L+Xjrdr4Ny+zO4k5ezOgnC9TuM/etA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.eefcf660.0_1634765021125_0.03594019636728141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.d21acc8f.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.d21acc8f.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/fab":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-icon":"0.26.0-canary.d21acc8f.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/tokens":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-GpgLH/G2iO0KtwzjvlDBHOMqTgneJ9NVbC6ZUJ1vxA6PD5Yu7Vx+HmjhNgeDxthL8K3/ksA2oHz5GaWQ7L8g/Q==","shasum":"38315b99824439241a0a2e651a5901cb8be37364","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.d21acc8f.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvRLCmCYJWpYMBxcOq677u0oFYzZ79cA8GGkIyUSQMMAiARQqvFNhWWjfPaiXq6m9V5PZ12+qiRG1knNGSqB8XeWQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.d21acc8f.0_1634769154004_0.9097001830439113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-fab","version":"0.25.3","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.25.3","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/fab":"=14.0.0-canary.261f2db59.0","@material/mwc-base":"^0.25.3","@material/mwc-icon":"^0.25.3","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/rtl":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0","@material/tokens":"=14.0.0-canary.261f2db59.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-XE1BQNKAEear+Uq58s+DjZe6yw7kiiQofdayXjbKVRf5VS4Kdd0PDfb8sIYyRbwszknVB9jmisk9LQjHTfzs7w==","shasum":"ead57649b7865ceb3eef916b988a4c03d18e2a04","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.25.3.tgz","fileCount":18,"unpackedSize":81188,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8ud/1pQDjt81r0Nl7AK4ismqut9nlu8HirSX0SewttAiB6RAhcgN+/3sYHykPnfg4yCvRZH3ADUd2IOI2i1VzxWA=="}]},"_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-fab_0.25.3_1634838944309_0.2456267379348489"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.60449b7b.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.60449b7b.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.9803d2dc1.0","@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/fab":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-icon":"0.26.0-canary.60449b7b.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0","@material/shape":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","@material/tokens":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-q7aZTeELcnh55/+YuanhqUeS2Y17GcouficMpMVyWIXNCLFLvQrBq56EG98jTpkRIVl6o5Qh8toDdNfOwWOF0Q==","shasum":"e951c8eae71238995ae6dfaf29fc9657aa313f60","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.60449b7b.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0mw/3B3k/JqYC6MBE1AFBKlidqITQnIC7cunmBeCj7AiEAgw6IhW7cjNMbJu8P/rmqE4Na7JXghrT0qec4RmYv464="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.60449b7b.0_1634840251081_0.23012510308198464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.0d8084ed.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.0d8084ed.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.9803d2dc1.0","@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/fab":"=14.0.0-canary.9803d2dc1.0","@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-icon":"0.26.0-canary.0d8084ed.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","@material/rtl":"=14.0.0-canary.9803d2dc1.0","@material/shape":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0","@material/tokens":"=14.0.0-canary.9803d2dc1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-eO6y8jYp/pY1t9UMTIWRivR3B1eXrnG3+TNEJ0PtmA+jFF+Q7T96zWKwf3QEMw9kjIR87a1Y66bf06yvtgxZIQ==","shasum":"be3fc922aa7f4ef4e9530002804e99dfbc7ec87e","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.0d8084ed.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiSTYqXFnD+bf9Ngs+OxYf8UOkDU4L5hpLbaqzQXxy9AiBGY2lxyJRRoD2Li/BhyT41DmA8Em/A81y8URSwww5yKw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.0d8084ed.0_1635443099087_0.6855299488570243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.232327ee.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.232327ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/fab":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-icon":"0.26.0-canary.232327ee.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/tokens":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-462eKxdEhXOd/tGyJd1Zs8SFkCi080NG0OD6RWZLvXdvlmxeJ1OMsT3/L1IeTuU4lgX0v5RA2QBHg7PLpHCGeA==","shasum":"75959c440fd579c6fa75ad29c16e546e608d51e0","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.232327ee.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFfJjFwv+9EBnkcRyS28S1FJmm+p9DzY5t0bvh5MH+ZwAiAx9gP8adNLPJr3KxaJCcuGYsrl8lSk8nD5IYFAYlvtyA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.232327ee.0_1635797751000_0.5250440246382189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.0a492ae8.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.0a492ae8.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/fab":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-icon":"0.26.0-canary.0a492ae8.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/tokens":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-fbJdZ3KpiNIWI4a5hUNoqtqTxc+defeFBvVEnSo0C8PO25W4pZmueTiiMHF3mto2MiRfpaXyCKioTsLws2arAw==","shasum":"7bdc16b6aada23ba69eb3a5ed937d100e9162d22","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.0a492ae8.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt1ughmEODzVzwRVzLe5Wd8jd7d2g3D1mGekpA5QH+kAIhAJZgBUJl5tvxRFXoMl3CUQeTd5ycbeocOS/Ajv7KnQKP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.0a492ae8.0_1635847228962_0.13469563346549118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.0aa18745.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.0aa18745.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/fab":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-icon":"0.26.0-canary.0aa18745.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/tokens":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-YA99jyv09LRbW5H+VriF/fqZwp2W2Fytx0Hn11JEhTQViumk4z25s7VnJrlxJQDpMmuvz/nq4tVrNOL1uajBUg==","shasum":"9fa547a2c3fedbbe3da15798ccf2278a49407f80","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.0aa18745.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp1Ytc6CpgFQG7Ynl0TdLxQl7tF3dyKzK5wD+S7HXPkwIgIzUq3/0dWJsl2dyMkqKeoXnOJeLN5ui5xKjIq0NOhwA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.0aa18745.0_1635876475480_0.11980018759434952"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.f3e28323.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.f3e28323.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/fab":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-icon":"0.26.0-canary.f3e28323.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/tokens":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-oS0qPhbWegsPenHiV+1viXCvyyzwJf1taDcDvMYPuPb6npzuVe47SLyW62mdhhJIBc98SOTbQPNr1XkRogUWsA==","shasum":"91836ad0cfad81a18c1658cc788bdb5a812ad484","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.f3e28323.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAkDQoe2vhkBgWdNwWpqP+o5jPb56y7A/NTdRoO9ATM9AiEA6cqZuarNf0Yafpp1l8qBxih2epKEK7eRss4V6teyGqM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.f3e28323.0_1635879578191_0.6345316407093304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.27e05c5d.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.27e05c5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/fab":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-icon":"0.26.0-canary.27e05c5d.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/tokens":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ivlYH+N9zDSABabQU9uyjmq0qH3Wyr/Y3/faCkxb2N/MUaLWMW9l4/4qZAtu11UHMr8QcdNI01Q2V+cFVugcZg==","shasum":"bac68ea68ed37fb9285357d2cf1ffd2dab51a5a5","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.27e05c5d.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2HIOpooDpdikjewc+hUsDSm9Qb0gAwoy3py2l0YrTAAiA9bxElctH5OzFyVUboYHGwCttmFy36eYlu2EEdErmh5g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.27e05c5d.0_1635965103553_0.10035201298448437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.b9e44af7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.b9e44af7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/fab":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-icon":"0.26.0-canary.b9e44af7.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/tokens":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-xCy5k1KSlhvnDDaVBJD7wzso3mu3ohmU21I0PVYtb22yC0vG+q6VRuy5zn+J0+Deblyf81yUdjagUVgpW3LlEQ==","shasum":"e488861afcb8556700cbbf90378113e38dd92bc2","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.b9e44af7.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICAnU2SB0r4fUAjvnRppI2jzHG6B64cQC677FiKgKgN4AiAq5cQRUI2WWqsWyAFRUt1i8V+vyG+33ci1BUEdyFeYdQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.b9e44af7.0_1635966246733_0.7160736715321956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.448f6cb9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.448f6cb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/fab":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-icon":"0.26.0-canary.448f6cb9.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/tokens":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-tBp4QTrsWS+RUSPgA8zRx15B20GhXshyS2mXSS4I3QJfdR0DbUmLUvUvdq+GbSJIiaQpIflrA/ianmj05v6wwA==","shasum":"2de7ad2673724e3dbd32379673091e87c456bb08","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.448f6cb9.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdhv0d26LNExkjIP8vKn/Jbcq1pPystbckX2+/DjDVCAiEA/fPJ43VafAwR4refQX2FDTbVHWeqCsnfSQGE/36D5Is="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.448f6cb9.0_1636049279128_0.4365749908173693"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.8067ce28.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.8067ce28.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/fab":"=14.0.0-canary.a986df922.0","@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-icon":"0.26.0-canary.8067ce28.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/rtl":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0","@material/tokens":"=14.0.0-canary.a986df922.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/AGOCSPhtb/paGI2BGev0/j75hgeUK8yOsETV6hdMx/zWpwTDbkWli2VDEAoVtMaMP0GU0zNqx3xHOsN8KBk4g==","shasum":"8d2620e18b0e070fdad2134ad4738746bd8bef56","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.8067ce28.0.tgz","fileCount":18,"unpackedSize":81257,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCheFRrDs5f8xRfwr1mDqHE6WbL5zusF4LTVv6c5Y9uGAIgGV/RcpLPVnd4uDtOv3wAy2/42bQ8Hh7CxZA6ER7PfpM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-fab_0.26.0-canary.8067ce28.0_1636064551252_0.6426489800680943"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.345c2bb9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.345c2bb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.43d08ba77.0","@material/elevation":"=14.0.0-canary.43d08ba77.0","@material/fab":"=14.0.0-canary.43d08ba77.0","@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-icon":"0.26.0-canary.345c2bb9.0","@material/ripple":"=14.0.0-canary.43d08ba77.0","@material/rtl":"=14.0.0-canary.43d08ba77.0","@material/shape":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0","@material/tokens":"=14.0.0-canary.43d08ba77.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-zF/R2u6qULvI1tSvAdRbhgKX0g5tLyYYyEIMgpbRUan6Uc7RmOc7+yi9OJpESvjfEZn+g3CEAGzIu42kz4G29g==","shasum":"0e413a31c1dc121d86bc65c42c7984e663a2d286","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.345c2bb9.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP34CRA9TVsSAnZWagAAMWcP/RahuapHP0rMKt/6pH+B\nq6VtTqZ1aaFkXqWh/z5s9ukIDHt1FsEn1qrhZ/XZhakEsRlIwyvORxUK1Nya\npNbJUcLwlDTp9V3dApnMzRqlQwCbbxPiWn1urB/X5wbGmAuNXOzAsYC+g0nI\nA6Q468vyJDOTaO8ZR0O6KteflUgUeqYEZ2oQCNu8GQGXiqrHtU0YzfXLjdgg\ndu33gIfwdKOluyYZmTPcTfxOsWRo49iVZ18bcuBLKmRZcnH4Gr2vT7qN3V83\n8NlqwFuWVib/onusrpOeIRaxVuPsZ04zszYMdIrxfVfQPoEsBU7paQb3xp2O\nAHzP7SpN6Vj/25DCKf6tjkD2qILe5Mzn2f5HE+YQN7wf7HQDB26/YRPBeRxj\nMKzFAQqWq8dPhiQA3dQZDca4oS/SeDHl0K7CNMSZrHvJpoiJbgYrNVsiT9mc\nmksMvX+PkJVu3g/CTA1mP9GR9RxMPObhhWXgHDQj/qwlHSD3I8XIEk5NypCh\nQHaHu87h1oqua2WkjY+jgGrsALPDaWDUyZ6ugE9pGF66WMu4B8xsUm7xNbxQ\nwVmFrbRw1dK2+ibrJp5gRgnmokX3weGIvDpY22wXQ5ESng+iH2Irm79gZ+xP\ny/4tXORga6U6baKi5iZThdUxGcs7ee/WVnjvR9M1jOMwz3MdAEpWfUXysUNp\n/AcO\r\n=9vQd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDScW5nKD7zowCWXy4Zo8fFQ+4GzV7dJWzyVOJQ5+eXkAiAIxdK1U4Oc3f4zghAU6my2RyFuFZ+fCiaPO7fbCVBKbw=="}]},"_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-fab_0.26.0-canary.345c2bb9.0_1638465016339_0.6423864141373621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.0547aeeb.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.0547aeeb.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.17a072535.0","@material/elevation":"=14.0.0-canary.17a072535.0","@material/fab":"=14.0.0-canary.17a072535.0","@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-icon":"0.26.0-canary.0547aeeb.0","@material/ripple":"=14.0.0-canary.17a072535.0","@material/rtl":"=14.0.0-canary.17a072535.0","@material/shape":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0","@material/tokens":"=14.0.0-canary.17a072535.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-7IH/jmHLrtGDQFJJd31bjNp5bzCtJNM7tVZZTkMzyaUDfwpg1Xxswyjn6FwE9C/xY2uxQLeWiVpVSFWBWwdpFw==","shasum":"5045cb88359d2a137007484050dd8349f494fc50","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.0547aeeb.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjv/CRA9TVsSAnZWagAAzhQP/jCzz+WCuLj+s/cXsgH5\nkdovS4I1t/g0oi+mbignmlG1Ldj9jcXAbhNZGdEuFUOjY9s0AJACWOU+/PGj\nZLvU8Mt1eFGa+A8ZXPJkRbGwD/Bc8w15eOXP9bFOD8EGyVJyBuRg5/bGRe+5\nVJPSnCb77d9f0z3a743L4qQQLC+I4Lh96DNza6TJ5J/XPb4ZU6ozD4mjwBii\nUf1kALTmKcFLc/sKNHrWZVIWyIql9U0b3U7UrsA52InXn7ndev9biQSARILN\nwF+ZjneYpm7+lfzWj/scqBh51hjP/u0kaZ/IYjSseShKZEkSYhCNzs4154xu\n4SRH1O8Ay49+JXpHIHf4EQNY0+BbRi+bQ7yuL7rciqfQ0FO/r1LtuBEM/kYU\nnTYS4kKD61jER1+952Ca7BaOH9nw9jBvIJcGAGx85izbPLhIHMzgCtqr1HG2\nAStTc6VtSRHo6Rr9L2gHl0cNLqiS5KZnPI5DxdQUsK/a+mVYCjfsT+DPdxPH\nezIVp5tt96xwRPcNslycW5S+NRLYSSyGaaRKFsjFG1PNQbuJQEOC2u8PhKm7\ntTQRFUC9+5R/6VEPK2DR3f/46/stpCAGeizCfpPdFT+Ez4eUnyyVdwIFkpHz\nzldltbZoMS6/VqbBs5ICgEq1vvb6WBQc/YyhmUXOjnUKKu4j6XbjjugDNPIg\nDSIC\r\n=ju9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzvwzbFKz4kxYw0Wt9ow1PPJqoQKNv2x520HLeNlnhNwIgOkrmJWKrWrUVHDyPtBGQkYRMGrQYHpGXCayWs+JCSjc="}]},"_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-fab_0.26.0-canary.0547aeeb.0_1638808574605_0.2835530886997224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.3b2452cc.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.3b2452cc.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.b6510c8c1.0","@material/elevation":"=14.0.0-canary.b6510c8c1.0","@material/fab":"=14.0.0-canary.b6510c8c1.0","@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-icon":"0.26.0-canary.3b2452cc.0","@material/ripple":"=14.0.0-canary.b6510c8c1.0","@material/rtl":"=14.0.0-canary.b6510c8c1.0","@material/shape":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0","@material/tokens":"=14.0.0-canary.b6510c8c1.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-ThiXco0pNb1iA6bMV4nuro2njylGbzWyTZ3fuOscsWoztMFGp+sqmmswUPwdPtdU51dXGzA/kVrCWYnNoDN5Bg==","shasum":"542028034e7ebb51cf20b4a7dd95facc4f851812","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.3b2452cc.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhaCRA9TVsSAnZWagAA604QAKNKmXwGqMkIEWwuXF/a\nYfUHBuuM8CIgqTpYl4zCUsc1gdkg0nN+Y0uGWz8KH9n/IL3rkGpt/sfaQfVy\nEhSJsIYZuJtA5QQCU6cKgkNVH1234E55s5aO+Wha5ObQsion4CN/G/cXKb26\nCpAaDq8Dz+QmO29/gGuVBJ+WfKTSgkMdq0A9eFDHSr2bRukujaOhiQYT7MpE\nMwMdgBK44p1sc3gLVdGbQhwjbpSGwJuYIHAPWX9mn3pOsL39EcRjxq3z/8q9\ngxfVylM6O500Q8ove3xOHoZMxROxC6yh5/f9L3owFgyMnLEJgwbpndN7WKig\ncZWpKhTIoSV2zEVK84S90lsgbTHKttaTLKeTsfbOGWnXO/iw18IOemO6QO2p\nCMuM+p9C8E+6dQvwy8LE0lSquS8BoJXXxRSa9ZI+9NgDMvL58M54gyY1S8Qz\n9zEXRogciz+JWDnBeRBQMlhg6KuYMvAeb7VO3kEifehfIM61GwOr4vh8dzRE\nhbvq63DrfaNO4MUuVQpdCJ8f37eM/jOBeiTTNRkvOOzmizvpa1uNRBhRHBXP\nyMLpumNvfI0oL/jRpbg0vtNIFqIBJ1BKBzoaEcsBp7OQzX17hB64qmSQwR07\nm8f+OJ0vNcEh6L5dZQWfdEQFFMdmAfsJ7BzTkRHkxzHWA7gKirEvjI9WobtL\n2hK3\r\n=CaiH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID8EFjXipUlYxUZLU9Lk1GZhCRONRFf+pg5FWtR0MGBsAiBSFEyn18KmfnAofmiKm7iV4reOGrMZYvQLRVhh/wR7bg=="}]},"_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-fab_0.26.0-canary.3b2452cc.0_1639008346515_0.5041780525753521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.cf7ba5a9.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.cf7ba5a9.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.f460e23da.0","@material/elevation":"=14.0.0-canary.f460e23da.0","@material/fab":"=14.0.0-canary.f460e23da.0","@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-icon":"0.26.0-canary.cf7ba5a9.0","@material/ripple":"=14.0.0-canary.f460e23da.0","@material/rtl":"=14.0.0-canary.f460e23da.0","@material/shape":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0","@material/tokens":"=14.0.0-canary.f460e23da.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-SHRvBXO+cIPe44PZLvB9sApnkFl1MedohFCpd/sP5l1DJzArXMttCFZRbVTxf8LGdMNfLyQ/nE+UBrX0fPzBjQ==","shasum":"b3025c762f62d64d80e69f25c31a043fd79bd588","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VXCRA9TVsSAnZWagAAgg0P/1X2WJNxsQs82V6Z6qb3\n1kzFgGMVgGLSfbzsmKwcO0I7fxL7PPPCbCnpEF4GPm6tUEEAMzlxJmzkvvcE\nV0QDGO6yzGzQYPcu17I0lT8zHHzAi8tYBwB52tLPYVPWBQkA3MtR9EdvXhl7\nGkpLco9VxHVjJNU/tXYJzEdA8nmChmYDWCO/geAkAdc0wvCbP7Ke5++uHZI6\n/H6jv+3LxsMkn0puZIZpfgVbrtCa4NFiAZ+Figpbf2dZZZGwRPjTAp79a7cM\nD6WhqIhkGKAAIKHF2QWd6otHBirAenZ8Az2NbyPFBibTZlULZ/C9f8/riyv/\nMWOPFIjHxBc3fg03IDt6FtP3PX4fg2co13HvblMcSo8QN/bUtH+x5sEwkwV1\n68xEm9tFhA4EAj3amtqqiyuDhTwvLXjPzgs9BrbNZZ+RwYq8tQmnJKl6e5bS\nxE+XQUIpwe5uDyyY0Hosa3V1BwW2ZIEDC5YosSIPaa5Y3BnZ+mFyZghL25hw\ni8EJcqLfars/PBXI/YO4LALevJGm++jtUN0NAoZY0VV6nHXuoGuN87Wo9FJM\nXbE19ufr3I5Z4CZIVja0CFqAMZsU6pXHANu5o3zRl0PcSrm1aOstmMyF8Rnt\nZJEv2DP2cMdhyC3xn/+rdXGGotw0f+mPQDpL2YyZ5emUaExs4aDHcB5JJQF/\ncszX\r\n=X1Gf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9KmBixY0kGHOFm8TnDIUimFCPd/dYXVR59J/vvVoGRQIhANu/a1s4zl+UpMOj+YXWVWwvVxHQGS6jSJ4i7su5rPoz"}]},"_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-fab_0.26.0-canary.cf7ba5a9.0_1639163223833_0.7909459749466827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.e1bcf14e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.e1bcf14e.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.3366a71d7.0","@material/elevation":"=14.0.0-canary.3366a71d7.0","@material/fab":"=14.0.0-canary.3366a71d7.0","@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-icon":"0.26.0-canary.e1bcf14e.0","@material/ripple":"=14.0.0-canary.3366a71d7.0","@material/rtl":"=14.0.0-canary.3366a71d7.0","@material/shape":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0","@material/tokens":"=14.0.0-canary.3366a71d7.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-BOQVrNh7RD37SCZ2I+nmQWlBw2hn9joy+IFkDPySqYr+zTtB+b9zqrQTxT22nJWZYaiBpjp1Le31NcAVtbg2Hw==","shasum":"264e7cb959f9833747bfe1b1bb9e05703420718f","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.e1bcf14e.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3d3CRA9TVsSAnZWagAA5KMP/iOduTm5GhHbS/KE3JXk\n8mcegk4XPpJq+Q1gzADV80XrsIeZlMSUjZ+x/jCTxZzB3ezUviZIL0NFlvM/\nd3Z5xamIMo3WZ/gtRZM25ToT692iw5ELqyGRjfdedaTeTdo3Jhnajdfvyucy\nXesMK24g0mWsYjMzMdJGWn5lHSyCL3wnuoaQHwSTuWGSl+/ka4a4RmtpamF+\nh/u1AUKRaX3Snr2TIgGUBrCj99lave7I3obvDtvEcNzSfeOPAgQGTbCvnlV/\nNoJiq3t28Macv5OoWvEFwcRFM0x7JLysqP+UxBJdAYbW890ycGQrQc+tM1jB\nn2dsibqwAzF4nagKliACUjuWM7QZNCvx9tH3BeFAVPgfTnvaAZyXgYuRMEh5\nvpn58KHs94tBjfoZMsnI4Zp5mMNF/y8HMP2uvVIII9ZcHB5+g8G5qTk9H+wQ\nAVsKOgk5n9DaeUyofhXf9ea4TAx2a1asIrwxSsYzak8wPicxRG5bjg6uszc6\n2GPdVH6ZDbNUQXhJe6qzmR5thkZqgWMYjKZig2tweEtaQXv69HqSC41SyOi5\n7z4qQ0lrotB6++DREPwl9v2kpPTZXkKLvH83QcPOZCsVIQm/EhfeFe2E0O6D\nNtOvKtIJLT4M5wJyyhcrd5vxqB+XeUl6Y6DfuUK71E6jQ/esx6kiOq92tgAa\nhW6N\r\n=hHrJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICX0McRiMCsuzn9p5XXwOKGpzHQhh1XUBWRheTJ2opYxAiBZQYEw1FYTWmMA6va7+PNkKb9y8iVFsex3mj45Zq+hDw=="}]},"_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-fab_0.26.0-canary.e1bcf14e.0_1640724343057_0.6772082373608537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.b9d35b69.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.b9d35b69.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.c047f7c19.0","@material/elevation":"=14.0.0-canary.c047f7c19.0","@material/fab":"=14.0.0-canary.c047f7c19.0","@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-icon":"0.26.0-canary.b9d35b69.0","@material/ripple":"=14.0.0-canary.c047f7c19.0","@material/rtl":"=14.0.0-canary.c047f7c19.0","@material/shape":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0","@material/tokens":"=14.0.0-canary.c047f7c19.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-k3cmYtkiXhOO1Mry6OOKP0VI6VO3xm8eC4nRySVeWr6r9SaIqICse3xQEgzK+lwkM01X0g0hRqL5b0ExMPdkXw==","shasum":"2451af692c409a8f7297c4602a3be3139e24016b","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.b9d35b69.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMBCRA9TVsSAnZWagAAnB4P/jcPFAGhQKJYNJrVB9fB\naDnSVzyxk5XLbwjdv05xDpRampLa7bK36B2Lt0bOu4hIGckrG90u4GFBmMHC\nOv47ja7sjNJj+p5aL8f7rcfDvlqcMbCWrdglr9u3galZVzvYu2XTuk+bx/bf\nECLnVgzpD0GH4sMIptQ31I5mBTY5UysJEtvqtIXtUtosFU8ButI3Uylep05z\n9xHXOjqPjhMRSQ8s+bK7oTKg+NdYNDbxef02+Ct1ELTCnih0ZYQjjnsDtags\nMBucwp03Z7Qs1u1khjaNYbdBA+9PHrBofJ06nbdoU7RolbiGBrp339jZ1b1X\nN93aggMjY5cUQWgGxsnNWNX0h3IsureOcf2hfgeDiqe/5KotxR1cy8wOgTBq\nHzC7sNoR3lQsR9euI2CWwa0haLhucY+IWKrITjsQDVPAh5EEI3vwYyDk41bs\nbNTEnTGmV/MwZ7mVqn+WQZOaPOuc0CMrBjuZf9mYASBKOb7IhVXboqG3XV6N\n26WCM1O2XPOSJXBBSoai2pGyyXqGY7NsP351U6gJUVHfrfdULo7bYat4RO2x\n7I2dP6LLNii8sxYm8ZYt7b+4oy2qtlBuOotzA4PhzkUNoGBMa9f04vYsvyG/\nQPqBaAk6XU3Skg3gs2C7rCaqN/K7hGgQ/7QuQkfZ2BjNi+0ie0uHo1ZbevC5\nDzUI\r\n=Az6z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB1K54cc8oFIxY4gM/4TYGwAXXjY7P2QuXatWpD1+3TwIhAIR4rOGpvYZpbRGivHO1KNFtrZjQRXeM4Srm8CAjMXMr"}]},"_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-fab_0.26.0-canary.b9d35b69.0_1641407233435_0.9606643223130642"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.2afff08e.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.2afff08e.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.05db65ec0.0","@material/elevation":"=14.0.0-canary.05db65ec0.0","@material/fab":"=14.0.0-canary.05db65ec0.0","@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-icon":"0.26.0-canary.2afff08e.0","@material/ripple":"=14.0.0-canary.05db65ec0.0","@material/rtl":"=14.0.0-canary.05db65ec0.0","@material/shape":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0","@material/tokens":"=14.0.0-canary.05db65ec0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-/2bizYLY9V0s87gwAjYfTtWA20i5to6PK+sdAY6CxlBT+hrmvu5O9U3NDXcpZLTcFeJAjrwpCaCWtGP5MRIDLQ==","shasum":"7dbd47fdef5537d1cec9e6850717ca55b076f506","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.2afff08e.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vDCRA9TVsSAnZWagAAIW4QAJSRsW3ESzeJD7hkt9l5\nbgy82gFHmYhdSM+T0+q0HrGfqGFhLH/6aC2OrNAOnHe8v5Qwk43JRN888wbj\nnPexR9xuYV2GVjWSgb7zMAFlDNUuAvV2hSV/+7vGe59wFFYJtfk2UWR9Xsk4\n7moHHIxdMtYFoSLvZAKC1q3NmKksDeiRyQjKdCjI+gf07d/Np2BOSyc/Vjrt\nkJIB3byxldgSTFryK6g0RK3U+onNYvPl8LZAusnxyxe6y91O2m2rfyEP9eUS\nSBz2UTt+2KnkSaho+/hEsquW4jwbsxKUIK9muy2hnwAxeGSGTExqlQ57ghLk\nHqEJJFArHiRqTdSbTjYzI8zlEWXezXlFKBQTjnBy8bg1EfaIFzZshPwy7Sck\na44MDwoRGtT7tx2hp7c00fbZUj9HhfbDPIjMGaw5GReNHJtuKjkH9oduw7/D\n3SjkboPcNoRlSZphB5QsXxk67z0Al5ZKUnO98Fua/UcrqhP8Bx052imsew6r\nDC/RMKWCXcxqGLXIcFdubcRcu2kBVpc3DqioCi281lnu+BocJWb6Lks9YJOP\ntqpLa9eRaSP1ZCIJMAE1QRYBIDKStWsaA7sz0jLI+TT8XXWZ7aac8h7dPOwY\n13eHAIChwjZdyMA6pC5X7rBLcOE43mjOvk1KgrSpDT9nxmBXu8U0NzCNMcfO\niYVe\r\n=gPJC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBGE1i3h1hP2YaamDuTQJ9+BvZ7/DDwSmP8pZmfPhwijAiBjqucI0cebH8+GyuBeSqjnlPF0d/T96jy1j3LMnRnxOQ=="}]},"_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-fab_0.26.0-canary.2afff08e.0_1641507779026_0.9824074284218736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.893fc857.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.893fc857.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.6ca8b8f85.0","@material/elevation":"=14.0.0-canary.6ca8b8f85.0","@material/fab":"=14.0.0-canary.6ca8b8f85.0","@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-icon":"0.26.0-canary.893fc857.0","@material/ripple":"=14.0.0-canary.6ca8b8f85.0","@material/rtl":"=14.0.0-canary.6ca8b8f85.0","@material/shape":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0","@material/tokens":"=14.0.0-canary.6ca8b8f85.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-w6j9xFh06F+9MLoHuR7QOE5wVm393F6DbpOxDRrVPV1KsMHU8bMno08uDhuopu8qEQSedNHfqaDY7srxxhf9rg==","shasum":"79cd172f2c82ee565ccc336f84f5d3c92dff0264","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.893fc857.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxACRA9TVsSAnZWagAA7qAP/A0SY84E/4YJCu2yqEw9\nI+IedWELBTglKeCiVXAs8qm3+yWuL4gZNz2TUt/Rnupb3AsSWcvEKukvm/AF\nbnInfGINAuBteLGAn+T7KdAjHJ7uyZfsXrbL14685OZp9sMitArU8V9MNre5\n6Ln5PF8kQY9bQvq/5zsTeWn+lkhCnr1vOE/zEch/R6jf/aCyK01qNLB0cMYq\ntNekFYL6TvSz8CIhftldgWsXGlwXsJ0UYw6tUPSYP8B6i4NQbd56oW3j1V/C\nHHULQJu/IhUO1ZCj8mIrsFfsFPv6D6Iv8xplShpAE4n1BvTsnl4gMwUK5Wal\n/ORS+q6VW/0MPInreMZ3ZP/UbrcfeLuJSqJw1USQh+q7vy1J4mUlT0VEtk2W\ndWt3Fkz0axxgClFXgdCDl23Pdm/C+3n1B2d/iG40pu9pKyzO8k/9OwtOxY2E\nACcjNH3c9iUI2qzAKmt3ip5gpRsDdv5bRivnGoj0KlB3G9bGaJwjjeGJ+XaD\nDwk7u9pXVGfT45zYkWYYZRRgP8FYPi541whsfRtDT/Oz55dTrUI/vnObhXCQ\nF0spTTxFwqhoMo0g81FNOb7Btp3HDhJG6fWdymJFa5036+/PbYWRt6mmPDgg\nXtvFFzddvDyAxi70NgYz5uVKmJqEgwqL8RY8+m/pYU0+2aJarIpckeswRQK0\nHjZJ\r\n=W+OR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAV0fz+/sFWzPdCL04lZPeL1DkxzzkUYdxKmhWiL1pQhAiA18yuoxA/NgFNBdpH5HsmJ9dnrmkljtnEuRzSC76Z/1A=="}]},"_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-fab_0.26.0-canary.893fc857.0_1641581632155_0.31151165648410317"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.69ba13b7.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.69ba13b7.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.c14e977ee.0","@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/fab":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-icon":"0.26.0-canary.69ba13b7.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","@material/rtl":"=14.0.0-canary.c14e977ee.0","@material/shape":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0","@material/tokens":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-of4huJJxvMNDN57FP86bf2tIa/EMhAj7lPSDcNtPjIsHiODDFZxLOLJqiw1DBANrQcKMExl49NY3Y2LGIfrsgw==","shasum":"4aad0e5d5d0c40ff3c1c94272fd6ac5edf538f15","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.69ba13b7.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I96CRA9TVsSAnZWagAAiaEP/RjKd6+c/Q27NrbKM8PT\n3UPjFNs9bXhekMxy0mGHFh2Yz1T4eaO4Qv8mUl7XjBBVieVfVYl32HFC3TBZ\nbZ+xn2/Apw9EZQFPCZTCFIc5BzB5gESdKdDHLEZF/0zk8HhGqzD1riE+lYsr\nn5shLUF3xy11GBxucoO7/HBPO8eu3TJgZnkPGJwJbE66kQMb+dHLixnvvCq9\n0puYgUKbeP3vjdOGX3X81HJp+F35WEJzxXTNbaLuz7wQUWSMRoTCTzLtg9ow\n4fW73x/27ekzj3pZ/25NOFu+dIqneXWQ3VF7wNHrZvoWk6IF8Mg4IAGxfYAw\n+o1StY6rGwIuOP0A9p6z5H+YqoszAn4QWEqf1rdVNcrm2hCGzqU3jOPN8Fc0\nT3FltbRiYZZi+JgNAy0XDJZzgT56ppmqs/wZz59wyiPn8vPBcjpLB2a43N7x\n86TQKM2edFYyNzmWOkTdeIPpWjISZioqeLDC4RxmPxylCibF1Uyngiyhny/W\nfR4oJskDfaW5WndUuSukALzqxJtK9X/6edEWkk6nr3HelTOzcfmWSWuBWnna\nyLKjVhk2xxHT2VYgKAKp7HHtldYstFjToc6mKxaaL/GB0VZlAA/pkErDmnfq\nYGBP2aXSnWow9y/U/XT1ild91pbiZiJ5NkLORRt8wa2bPBBMG2OG5tI0hvUV\n13Oz\r\n=ZDas\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDL7TIokclcTn0O6NneIXnIY/6SAAdlRPXbN8yWektBpAiEAzJ/5pw5qRY1YycDHQGKdXB3ckpTHdDmF+VNbBIkZ/oU="}]},"_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-fab_0.26.0-canary.69ba13b7.0_1642631034405_0.899281848554726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-fab","version":"0.26.0-canary.0af8ade5.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"0.26.0-canary.0af8ade5.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.c14e977ee.0","@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/fab":"=14.0.0-canary.c14e977ee.0","@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-icon":"0.26.0-canary.0af8ade5.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","@material/rtl":"=14.0.0-canary.c14e977ee.0","@material/shape":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0","@material/tokens":"=14.0.0-canary.c14e977ee.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab';\n  import '@material/mwc-icon';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-fab@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-afUyXsaHniZnKyrq32rSb89/e0PTDDp645ej9xVtVb3tlswQ8AfbtgEXJIsRdYZRjDqQuP+aq/z59VG66JBmyg==","shasum":"02c49e33cb0f58b1f9c3b55a23d646853f911ca3","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0-canary.0af8ade5.0.tgz","fileCount":18,"unpackedSize":86275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZeYCRA9TVsSAnZWagAAY1wP/AqS0+k+ORJRVUpYeA/c\nyDiImr1m4uL7618EQ+8fZQfUl3/E8ysZZFtkCd81268vfJKvmUkPOEFT0y8M\nLn/YGr9pr2QcwpBLhR+vZfijqKOnb59cTJ/fynqozG/VuUh2bBUGy+q7Z6qu\ntwb4/gAi/WJ84CcA5L4fHuKV7DcZ+Ay7f+GT24byIPy6A525bjg1f9yl4ZEN\nKiXND7/TsgN59QJRBHyBPDVg9c14IOLcqPthFjhBoQrDnBonOInwcFVYm9Mr\nJ4nyrj6EAu/Q8QGLqMWGpmNDa5KA6MlhqJeXkhk63LvZqNWz/eDV8nY51VR1\n70CxoFfvsfUA3JwVL0CdboGx0p64RtiwvcWFVVQjJL2NKWm4fiPsM/jje3Bn\neqsHLyBOSCo+ztWQb6AYw6vck7dmWSwilQIFqOLmVoT6ZpoogR33BJbZrmrR\nLiUnz+Dvbsb6vABA2Z9Fu6SFx+fkVAoIHoAaL9nbvl/mRbrQ7+bCYb2RohIl\nrdS8fSHzJ4aBozqYbidxXB6yOdqruasslB9c88GpAMWWLj+0eCW5xwmZQbXx\naF2Jw9CTW/fWsb3mlsi2YCE9hI1fAsENMo4HGSpxnUamKJMbelxf50W8UnoZ\nzpHSGaiTGdm8I7pc+fCCE2biGalHAPj4+fgmfwvX6ANMPZBp25WpdGil6DGF\n2T0K\r\n=Oz1h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEikYxWcqQATu29z6wOEz0oBfpwzsbG+A3yV55LSkHR/AiEA/GYiUgsMVXC0L80XgO4oPvMQdwRo1vYVyMJhEaxsBZE="}]},"_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-fab_0.26.0-canary.0af8ade5.0_1644271512153_0.21727576482647426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-fab","version":"0.26.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.26.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0","@material/elevation":"=14.0.0","@material/fab":"=14.0.0","@material/mwc-base":"^0.26.0","@material/mwc-icon":"^0.26.0","@material/ripple":"=14.0.0","@material/rtl":"=14.0.0","@material/shape":"=14.0.0","@material/theme":"=14.0.0","@material/tokens":"=14.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-2P4p+Ad44NWSDStM/9U+8CpIxB52WRGhHI3Az0xsz1JW5GO8gvJArX+2Q6Y0gOWbdfPbzPB291L8I5+S4Wl6qw==","shasum":"39800a438b698a5deadc0caa647c10b6443f6c35","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.0.tgz","fileCount":18,"unpackedSize":86128,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8judMI3J4/4+W1n1gMPDXM0NwU51Giq52FGBRh7LFLAiEA7ID9yyWbxtO8AJTA4FhfKRFvVeJ7870/nJx+Y9rTsRk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo65g/9Eg0D1FY+Q1DIlTD53K/dhR7LE/leZ6OPJuvIw/fGDdQC93wg\r\nsRId1UtZ90LoQPp9oId50gp1Ueu1IMfR4CddZ5+46P3X3DQswJUypzTVqmcr\r\nPkloRi2ZShtL5K+JZMxeFK1xbqCkvsXENHS3naPTW66j+SxZW+Z4SqAx3rxD\r\nx3ecas4WldHjNwu64S8gwdfrwBVejYmm2CjrqAtBGhBvdkKURTmmRN8oxlmB\r\nBMX/d0dC7m0vz/H/d6w3AW2PyNK5OhybTcyLf9jzQ6o4Z/NbyClSz6mgM8pg\r\nIw1n/9TedXyFHwjjVNCZeaUq3/Xi67PInXqK782ehqwtoRCp5nCutBhNuj70\r\nrBPKEoA3iyWskmuVDL3XcMUfhK7CX4ODVwmOPPU7c+Z3Yqmxa+EzAzgg/Cdw\r\nDW0Er3lXIVONSeIczOAVygOAGdV8kFtLdVfLFIouZuEbKH+7cM3xSnhGKEOG\r\nUeot+WfTHqFS54U7+AHlGBHdonkOIm8a78bfYRSD/XXxfVEZTHh3ndWwvduA\r\nZtiJAHF8XiGTruNrjR63kD1l4/5Ry2XNMmIxHuCud7jQgbiEB/hO/cedbrWf\r\ndb4oEJiGP1qgDHw4IBatNovSnCZ9drgFDyVsXLCTQr3jfnrmK2vcbr5wP+Rr\r\njotPUAJ7dV0S27qdY1WlCJi4udjdSAFpJAU=\r\n=bsTx\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-fab_0.26.0_1651599033171_0.1951801445699879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-fab","version":"0.26.1","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.26.1","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.53b3cad2f.0","@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/fab":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.26.1","@material/mwc-icon":"^0.26.1","@material/ripple":"=14.0.0-canary.53b3cad2f.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0","@material/shape":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","@material/tokens":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-JmeoGb9WJbu8B0fdDo4bx72Mo17F+wOnMC19ofUM/6XkpbPNEgI+HppE4j/e4i5vGEd7pxswWNqGg1LFPLCV7w==","shasum":"984efed589121bf02192a3e3ae885f3c07d6dc84","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.26.1.tgz","fileCount":18,"unpackedSize":86373,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLynw25cssL/CVN3UDrQlOo+ihJu/r32y2MsmeV3DSDAiBDLWCF9FGlFAN9fWhT14+LMfuW0bacTfjKJDXWSAJSMA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3dQ/8DVIFuQ4wZZhiyAKnZg3C6t1fSqx0Wm6ZNZficAavLmZGdDdQ\r\nZ6LvDM3THcyZF1kppPp47UE0p7zVJn3tr+4BKICuqDISD3JlDwOAFOU0z3CZ\r\npQlB87TGKHDDPemfWlvfQUmLAURt0oA+wx/lsb1Vr2TjieVkuRg0SetFVAr9\r\nYXBnspEXe1rYxA6/5K6+DtkcF4/N4qM9PP+WT6Ka4GcSUT0Ts8YstUmogtce\r\nmiccsOVUlEBMiej0wx81g4iB0tTUAaQfooaUIRoyDjsDtwg+0MWeFVG0CDAp\r\n1jIKIqESOh0TUHIuu7f0bNWICwmp3ZVN/RhQ1BaJsoCQ3LXQJEuqvlkpPHHP\r\nw2cRymlI5AE/X1QZqcV96LZ6RnZWezye0I6fwP8XzIl5Tl5WRpBiX0w0xb74\r\nInGHUcW8ZM5Uc7AK2BUY1086VkkTZhPNgjmgzWkx1n88Vq+1JecEJhGqgQn0\r\nSteNYsePJQDWq+FS9LnUYcKbmqYlxQZsjPFlcKyxON64Ed6PcehtWreDJ6dC\r\nxpGx22evt49MZct5q79jG6aD6biOJ6tDycZSJxRL3kczTJukkbmSkru3cT6R\r\n7YtQVWTM6nXez0iHDCEXYqYildktuDw9j47FQyhDvZQj5R2btT8kG3PeKQmy\r\nvsN2KZEeTah8pjXD8cZCHCuwu45sm8mk1TY=\r\n=6iKg\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-fab_0.26.1_1652128311761_0.9818281097028554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-fab","version":"0.27.0","description":"Material design floating action button component","keywords":["material design","web components","fab"],"main":"mwc-fab.js","module":"mwc-fab.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/fab"},"license":"Apache-2.0","dependencies":{"@material/mwc-ripple":"^0.27.0","lit":"^2.0.0","tslib":"^2.0.1"},"devDependencies":{"@material/animation":"=14.0.0-canary.53b3cad2f.0","@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/fab":"=14.0.0-canary.53b3cad2f.0","@material/mwc-base":"^0.27.0","@material/mwc-icon":"^0.27.0","@material/ripple":"=14.0.0-canary.53b3cad2f.0","@material/rtl":"=14.0.0-canary.53b3cad2f.0","@material/shape":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0","@material/tokens":"=14.0.0-canary.53b3cad2f.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-fab.scss"},"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-fab@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-7XUxeO14etuXe0FQdB1Y6bg8TilbQKX/NGi9b0O6D0hkcY3Y0Vk2xyoAvQArbHRz3hGfiH1cS7FaJGRSilWcjg==","shasum":"7803a5a172eb1a3d939948f87593db300ae65054","tarball":"https://registry.npmjs.org/@material/mwc-fab/-/mwc-fab-0.27.0.tgz","fileCount":18,"unpackedSize":86373,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK+9AJgKdwi2ogEXSCylpdgzUkFzBkjaS8NRw4Qvf1gQIhAKX+qxP4onPN0O7cJxt1IrywwU+MPkfy4nK/imHlN+wd"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo26A/+IhKNNU35XZXIeHA+j9P0+rxIw+Upp/4ZUn/BNBoHBtriUE8A\r\nC3SytPqRNU/MsJynGKSjTDbuQ9w2IxCxPtAb39cXsy6iX9nhGWheaJX+2Kzl\r\nu0zRUputR9lO0vwSAZs+j64r2+NNGAKy7NXIizrKGDrTIK0KoXOcGXAqHxBC\r\nNGm/EhYTzd1JLQCiszWyE+vtshfG5nchnGxDG7xUvm1rn0EKuU7OdKX5E5d+\r\nfpr8erTYsdCkp7EqgK3B+DSWQKyZ7OC0bMUhTJc9wdtIZ5Q2qjbtNZGhUPip\r\noxw2ptvJLSPH+MP1gVRb4cdPVcwpB6b6PqS88Oj2LZBY6uzZuxLeyVlUgm0O\r\nRG9E2R+KY0SWAxxU5KMvelbie9XQjvCjSB1f2TTZKLDseRdqkpGo4bXE7ggR\r\n8xWu/K4WvQXHRhLdFjSCuPNK8QN5sXMNqHp5KMJlJIf4aqsYpdzzjtlOkijx\r\n6gcYNsP1gk+qhdZUwqu4GjrdGB+HOJ1uGSD+ywaxQhuG3poLa6mDnEgNcEyE\r\nbdiNWgtaLBp1QGWMwXB5IogzEUMTNjweEsSCfHRmRhLpGnom5NGqJpAY5dwc\r\nYlGFKu0DvKB+eKNiBxxnY+9QoZ3V77tBtD23mhJ1POay7fpmE4EB2So73scp\r\nj0ylaoUqyPMcluc3S7pOih3vpZvKN3rUF6Q=\r\n=KWYS\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-fab_0.27.0_1660331528605_0.7207252253587215"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2018-05-08T00:04:40.295Z","0.1.0":"2018-05-08T00:04:40.473Z","modified":"2024-04-04T18:49:03.784Z","0.1.1":"2018-05-09T21:05:14.403Z","0.1.2":"2018-06-14T22:51:15.818Z","0.2.0":"2018-09-14T00:36:46.007Z","0.2.1":"2018-09-22T01:00:30.542Z","0.3.0":"2018-10-04T23:25:58.621Z","0.3.1":"2018-10-08T19:20:45.437Z","0.3.2":"2018-11-17T02:06:00.658Z","0.3.3":"2018-12-04T00:58:06.437Z","0.3.4":"2018-12-13T20:39:19.535Z","0.3.5":"2019-01-11T22:16:46.828Z","0.3.6":"2019-02-05T20:18:38.010Z","0.4.0":"2019-03-12T00:01:27.372Z","0.5.0":"2019-03-26T22:38:51.550Z","0.6.0":"2019-06-05T22:20:22.348Z","0.7.0":"2019-08-27T21:23:51.810Z","0.7.1":"2019-08-28T02:54:23.732Z","0.8.0":"2019-09-04T00:04:47.418Z","0.9.0":"2019-09-27T01:36:17.498Z","0.9.1":"2019-09-30T21:05:09.486Z","0.10.0":"2019-10-11T23:28:20.035Z","0.11.0":"2019-11-26T21:49:35.232Z","0.11.1":"2019-11-27T00:26:43.748Z","0.12.0":"2019-12-17T23:47:55.230Z","0.13.0":"2020-02-04T04:46:37.023Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:24.744Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:00.467Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:28.009Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:52.538Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:12.215Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:46.718Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:01.053Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:56.697Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:51.779Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:18.498Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:41.889Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:34.343Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:19.198Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:23.068Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:22.048Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:40.774Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:53.164Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:26.162Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:01.412Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:35.317Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:52.032Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:02.671Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:58.738Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:18.632Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:26.772Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:49.589Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:57.160Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:46.585Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:28.056Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:20.774Z","0.14.0":"2020-03-19T21:28:40.157Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:59.653Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:16.521Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:58.180Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:33.875Z","0.14.1":"2020-03-23T17:57:38.636Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:58.641Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:41.052Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:12.558Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:06.106Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:06.927Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:29.790Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:23.671Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:32.317Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:20.614Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:50.524Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:52.513Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:48.033Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:08.295Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:12.449Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:45.534Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:55.859Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:08.040Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:29.848Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:36.538Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:44.750Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:35.523Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:14.271Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:56.984Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:42.205Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:46.466Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:23.917Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:05.759Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:06.528Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:32.968Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:20.648Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:15.349Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:22.733Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:21.077Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:10.785Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:30.721Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:22.934Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:01.264Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:24.078Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:42.510Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:59.648Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:46.937Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:56.945Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:00.582Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:05.260Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:03.732Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:21.080Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:16.521Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:44.439Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:51.323Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:45.505Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:47.011Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:04.767Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:18.001Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:31.359Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:22.927Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:50.980Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:05.792Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:53.895Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:38.657Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:08.274Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:44.187Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:36.839Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:57.208Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:06.922Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:12.710Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:51.139Z","0.15.0":"2020-05-05T22:36:13.455Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:32.498Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:48.236Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:17.385Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:35.329Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:47.620Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:09.546Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:43.044Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:21.316Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:53.008Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:20.527Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:01.844Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:20.932Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:30.754Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:43.073Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:16.299Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:25.298Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:00.689Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:55.090Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:36.521Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:44.784Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:35.419Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:53.067Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:20.821Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:28.524Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:43.966Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:19.917Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:54.216Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:28.934Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:20.057Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:43.763Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:53.418Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:51.296Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:09.508Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:25.280Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:18.527Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:17.322Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:34.154Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:04.593Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:41.328Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:13.591Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:42.547Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:52.504Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:32.867Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:55.481Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:19.002Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:42.708Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:54.592Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:05.812Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:28.939Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:53.853Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:07.942Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:46.606Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:10.278Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:58:33.196Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:47.347Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:44.152Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:45.507Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:54.466Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:39.306Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:48.444Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:47.281Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:44.960Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:03.068Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:13.441Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:25.575Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:57.545Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:17.691Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:24.357Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:29:47.070Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:19.219Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:29.318Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:51.343Z","0.16.1":"2020-06-30T21:14:47.521Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:10.616Z","0.17.0":"2020-07-01T19:44:21.129Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:28.198Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:30.587Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:35.583Z","0.17.2":"2020-07-02T05:58:18.885Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:25.278Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:42.911Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:12.858Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:30.004Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:43.954Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:49.025Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:32.216Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:24.966Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:25.731Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:08.800Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:52.185Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:37.159Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:00.458Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:30.905Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:00.872Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:46.360Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:08.207Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:36.595Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:56.538Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:43:39.759Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:36.043Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:58.929Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:59.163Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:41.580Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:45.799Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:03.225Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:29.534Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:35.315Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:56.730Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:13.672Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:24.067Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:35.513Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:54.676Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:18.323Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:31.245Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:38.586Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:41.622Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:34.145Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:56.862Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:16.803Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:18.012Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:41.047Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:59.177Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:37.084Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:13.401Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:29.474Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:46.786Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:11.666Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:46.558Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:37.913Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:41.219Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:25.105Z","0.18.0":"2020-08-03T21:24:23.080Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:56.504Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:10.916Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:52.444Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:05.019Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:30.616Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:26.686Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:50.368Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:30.012Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:51.533Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:57.480Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:31.556Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:29.897Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:04.231Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:48.232Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:13.768Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:32.636Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:36.567Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:22.804Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:43.226Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:08.631Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:35.516Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:36.879Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:05.713Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:46.967Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:12.574Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:56.624Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:58.138Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:05.249Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:04.759Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:30.037Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:08.358Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:37.484Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:18.381Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:53.036Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:12.926Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:27.582Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:18.121Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:11.302Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:17.481Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:25.762Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:40.879Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:11.606Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:21.261Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:40.889Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:41.976Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:58.208Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:41.788Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:10.395Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:20.154Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:22.301Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:18.210Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:37.518Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:18.653Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:16.956Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:26.777Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:33.418Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:24.260Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:39.433Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:55.691Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:26.137Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:02.440Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:40.164Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:44.087Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:37.753Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:49.565Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:13.276Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:31.047Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:25.484Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:36.366Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:31.296Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:19.683Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:17.347Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:05.430Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:30.425Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:00.477Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:13.729Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:29.407Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:50.438Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:36.728Z","0.19.0":"2020-10-07T22:33:21.637Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:48.478Z","0.19.1":"2020-10-08T23:05:52.605Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:15.005Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:24.815Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:18.215Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:25.785Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:57.352Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:35.665Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:32.649Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:19.596Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:08.652Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:19.602Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:56.837Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:08.154Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:15.891Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:04.949Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:44.730Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:42.887Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:53.927Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:54.103Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:48.719Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:00.527Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:03.577Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:13.706Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:08.941Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:51.442Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:32.805Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:09.701Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:16.992Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:56.776Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:16.369Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:47.514Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:14.672Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:00.548Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:44.674Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:28.175Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:49.567Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:17.167Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:26.651Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:22.589Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:17.591Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:55.834Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:32.453Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:16.468Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:23.849Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:52.812Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:07.427Z","0.20.0":"2020-12-03T22:28:51.902Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:57.066Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:07.769Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:03.550Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:54.726Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:58.521Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:14.693Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:46.471Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:45.965Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:41.780Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:21.242Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:13.947Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:09.611Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:34.599Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:05.553Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:17.935Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:07.450Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:36.216Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:20.259Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:20.355Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:30.755Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:35.013Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:25.472Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:21.216Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:54.479Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:29.531Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:42.747Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:42.323Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:38.540Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:35.119Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:32.068Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:34.196Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:52.767Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:56.770Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:21.001Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:36.148Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:11.291Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:19.793Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:33.515Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:13.936Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:47.086Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:45.212Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:32.049Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:52.506Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:12.575Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:23.151Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:43.146Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:12.010Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:08.760Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:01.890Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:11.744Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:27.419Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:58.887Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:09.170Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:11.689Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:35.901Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:01.192Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:08.275Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:23.087Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:24.140Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:07.960Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:19.530Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:15.296Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:32.599Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:50.339Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:47:49.262Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:15.285Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:46.933Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:27.523Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:14.631Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:37.586Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:45.653Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:37.674Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:20.244Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:28.057Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:03.777Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:52.860Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:22.405Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:39.174Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:46.441Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:30.482Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:58.118Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:53.105Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:04.656Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:34.374Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:30.002Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:58.706Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:42.457Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:08.793Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:50.809Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:24.231Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:11.878Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:03.910Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:27.843Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:59.164Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:35.985Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:32.667Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:51.906Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:23.496Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:35.602Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:13.539Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:17.147Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:31.292Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:10.068Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:12.964Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:28.523Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:57.499Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:00.122Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:08.329Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:38.940Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:43.796Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:35.992Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:17.327Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:59.306Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:24.013Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:03.170Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:28.265Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:09.405Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:06.259Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:42.355Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:14.791Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:34.885Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:24.352Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:33.400Z","0.21.0":"2021-04-30T23:58:08.267Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:22.056Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:17.472Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:40.457Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:44.575Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:02.270Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:30.982Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:20.596Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:03.537Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:56.202Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:24.691Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:18.286Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:36.855Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:40.262Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:22.376Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:10.805Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:45.141Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:37.979Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:27.533Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:29.502Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:16.969Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:28.781Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:57.448Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:32.447Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:07.608Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:44.928Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:35.048Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:02.409Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:19.744Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:06.775Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:05.403Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:31.560Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:55.335Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:22.189Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:28.423Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:31.656Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:31.376Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:09.559Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:20.331Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:26.303Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:13.550Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:19.726Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:24.661Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:11.110Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:10.463Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:34.488Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:14.891Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:45.766Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:08.520Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:24.819Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:58.640Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:47.654Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:43.736Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:11.098Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:14.505Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:06.561Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:20.873Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:54.497Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:08.005Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:26.597Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:29.327Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:19.544Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:37.516Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:50.614Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:52.820Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:42.469Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:09.595Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:45.763Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:42.212Z","0.22.0":"2021-07-14T22:38:55.701Z","0.22.1":"2021-07-14T22:52:53.029Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:10.615Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:38.520Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:49.185Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:44.307Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:09.149Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:55.777Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:07.024Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:20.650Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:52.818Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:12.371Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:42.026Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:11.219Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:44.881Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:49.804Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:41.599Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:47.002Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:44.486Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:01.974Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:01.331Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:09.547Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:18.109Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:21.718Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:54.932Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:59.233Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:12.154Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:13.077Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:32.305Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:29.187Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:14.046Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:59.592Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:52.574Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:52.150Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:34.684Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:47.358Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:00.092Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:33.648Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:55.464Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:38.778Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:00.498Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:04.297Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:45.861Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:09.903Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:18.885Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:06.259Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:31.564Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:26.289Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:29.093Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:21.100Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:27.365Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:31.114Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:38.064Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:19.161Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:46.502Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:10.877Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:24.398Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:02.340Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:48.486Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:07.033Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:21.343Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:00.575Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:50.939Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:06.075Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:53.170Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:41.023Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:06.590Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:37.514Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:50.945Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:18.834Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:30.565Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:44.510Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:54.485Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:28.801Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:04.404Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:51.673Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:26.867Z","0.23.0":"2021-09-13T21:35:47.072Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:15.172Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:18.491Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:25.146Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:25.810Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:01.139Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:18.910Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:57.313Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:43.286Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:22.168Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:50.550Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:43.666Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:11.632Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:50.604Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:13.695Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:59.062Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:53.790Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:50.157Z","0.25.0":"2021-09-21T02:53:06.029Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:15.084Z","0.25.1":"2021-09-21T03:12:42.736Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:12.711Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:21.155Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:51.907Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:41.788Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:12.482Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:26.685Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:35.605Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:54.589Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:54.067Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:57.869Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:20.824Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:37.751Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:19.124Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:25.463Z","0.25.2":"2021-10-11T23:18:33.501Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:32.529Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:03.653Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:41.307Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:34.183Z","0.25.3":"2021-10-21T17:55:44.575Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:31.267Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:59.279Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:51.187Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:29.122Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:55.640Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:38.411Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:03.724Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:06.883Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:59.270Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:31.416Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:16.467Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:15.071Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:46.637Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:03.992Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:43.240Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:13.662Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:59.198Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:52.374Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:54.555Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:12.339Z","0.26.0":"2022-05-03T17:30:33.363Z","0.26.1":"2022-05-09T20:31:51.871Z","0.27.0":"2022-08-12T19:12:08.835Z"},"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 floating action button 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/fab"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-fab>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-fab.svg)](https://www.npmjs.com/package/@material/mwc-fab)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nA floating action button (FAB) represents the primary action of a screen.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/mini.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/extended.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/custom_color.png)\n\n[Material Design Guidelines: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html)\n\n[Demo](https://material-components.github.io/material-web/demos/fab/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-fab\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-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/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab icon=\"edit\"></mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab/mwc-fab.js';\n  const fab = document.querySelector('mwc-fab');\n  fab.addEventListener('click', () => {\n    edit();\n  });\n</script>\n```\n\n### Standard - slotted\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/standard.png)\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons&display=block\">\n\n<mwc-fab label=\"edit\">\n  <mwc-icon slot=\"icon\">edit</mwc-icon>\n</mwc-fab>\n\n<script type=\"module\">\n  import '@material/mwc-fab/mwc-fab.js';\n  import '@material/mwc-icon/mwc-icon.js';\n</script>\n```\n\n_Note: `label` should still be set for button accessibility purposes._\n\n### Mini\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/mini.png)\n\n```html\n<mwc-fab mini icon=\"add\"></mwc-fab>\n```\n\n### Extended\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/extended.png)\n\n```html\n<mwc-fab extended icon=\"shopping_cart\" label=\"Add to cart\"></mwc-fab>\n```\n### Customize colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/fab/images/custom_color.png)\n\n```css\nmwc-fab {\n  --mdc-theme-secondary: white;\n  --mdc-theme-on-secondary: black;\n}\n```\n\n## API\n\n### Slots\n\n| Name     | Description\n| -------- | ---\n| `icon`   | An icon to be slotted into the fab. _Note:_ the `label` property should still be set for button accessibility.\n\n### Properties/Attributes\n\n| Name            | Type      | Description\n| --------------- | --------- |------------\n| `icon`          | `string`  | The icon to display.\n| `label`         | `string`  | The label to display when using the `extended` layout, and the `aria-label` attribute in all layouts.\n| `mini`          | `boolean` | Modifies the FAB to be a smaller size, for use on smaller screens. Defaults to `false`.\n| `reducedTouchTarget` | `boolean` | Sets the minimum touch target of the default-sized mini fab to recommended 48x48px.\n| `extended`      | `boolean` | Enable the *extended* layout which includes a text label. Defaults to `false`.\n| `showIconAtEnd` | `boolean` | When in the *extended* layout, position the icon after the label, instead of before. Defaults to `false`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\nName                               | Default   | Description\n---------------------------------- | --------- | -----------\n`--mdc-fab-box-shadow`             | mdc elevation 6, 8, 12 | Sets the box shadow of the fab. Elevation 6 when idle, 8 when focused or hovered, and 12 when active.\n`--mdc-fab-extended-label-padding` | `20px`    | Sets the padding on either horizontal side of an extended fab.\n`--mdc-fab-extended-icon-padding`  | `12px`    | Sets the padding between the icon and the label of an extended fab.\n`--mdc-fab-focus-outline-color`    | `initial` | The color of the focus outline ring (off by default).\n`--mdc-fab-focus-outline-width`    | `0px`     | Sets the width of the focus outline ring.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| ---- | ---\n| `6`  | `0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)`\n| `8`  | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `12` | `0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-theme-secondary`              | Background color of the FAB.\n| `--mdc-theme-on-secondary`           | Foreground color of the label and icon.\n\n## Additional references\n\n- [MDC Web: Floating Action Button](https://material.io/develop/web/components/buttons/floating-action-buttons/)\n","readmeFilename":"README.md","keywords":["material design","web components","fab"]}